Creating Figma Logo with TailwindCSS
July 27, 2021
To create a Figma logo with tailwind. Either we have to first setup tailwind in our project or for testing we can use Tailwind Playground and can start testing tailwind. So, we'll be using the later. So, we can head over to Tailwind Playground and paste in the following snippet.
<div class="flex items-center justify-center min-h-screen min-w-screen">
<div class="grid w-32 grid-cols-2">
<div class="h-16 bg-red-500 rounded-l-full"></div>
<div class="h-16 bg-red-300 rounded-r-full"></div>
<div class="h-16 bg-purple-500 rounded-l-full"></div>
<div class="h-16 bg-blue-500 rounded-full"></div>
<div class="h-16 bg-yellow-500 rounded-l-full rounded-br-full"></div>
</div>
</div>
On the output screen, you should be able to see the tailwind logo,
And, If you want to add the dark background, you can update the code like the following,
<div class="flex items-center justify-center min-h-screen min-w-screen">
<div class="flex items-center justify-center w-64 h-64 bg-gray-700 rounded-3xl">
<div class="grid w-32 grid-cols-2">
<div class="h-16 bg-red-500 rounded-l-full"></div>
<div class="h-16 bg-red-300 rounded-r-full"></div>
<div class="h-16 bg-purple-500 rounded-l-full"></div>
<div class="h-16 bg-blue-500 rounded-full"></div>
<div class="h-16 bg-yellow-500 rounded-l-full rounded-br-full"></div>
</div>
</div>
</div>
Now, you should be able to see the output as follows,
So, this is how we can create the figma logo with tailwind.
If you prefer you can take a look at the video tutorial,