Trying CSS art with Tailwind

I’m fiddling with making art with Tailwind to improve some design and CSS skills.

Does it make sense? Isn’t it harder than with pure CSS? I don’t care, it’s just for the sake of it 😁

It’s loosely based on this post.

Run it here: https://play.tailwin…


This content originally appeared on DEV Community and was authored by Felipe Freitag Vargas

I'm fiddling with making art with Tailwind to improve some design and CSS skills.

Does it make sense? Isn't it harder than with pure CSS? I don't care, it's just for the sake of it 😁

It's loosely based on this post.

Run it here: https://play.tailwindcss.com/BInT1TVC7i?size=540x720

Code:

<div class="flex h-[100vh] w-full items-center justify-center bg-blue-300">
  <div class="relative h-[200px] w-[200px] rounded-full bg-orange-300 shadow-2xl">
    <div class="0 absolute left-1/2 top-1/3 h-[50px] w-[130px] -translate-x-1/2">
      <div class="flex items-center justify-between">
        <div class="relative h-[0px] w-[40px] rounded-t-full border-t-[20px] border-t-white">
          <div class="absolute -top-[10px] left-1/2 h-[10px] w-[10px] rounded-t-full bg-slate-600"></div>
        </div>
        <div class="relative h-[0px] w-[40px] rounded-t-full border-t-[20px] border-t-white">
          <div class="absolute -top-[10px] left-1/2 h-[10px] w-[10px] rounded-t-full bg-slate-600"></div>
        </div>
      </div>
    </div>
    <div class="absolute left-1/2 top-1/2 h-[80px] w-[150px] -translate-x-1/2 translate-y-3 overflow-hidden rounded-b-full bg-slate-600">
      <div class="absolute left-[10px] h-[20px] w-[100px] rounded-b-lg bg-white"></div>
      <div class="absolute right-[10px] h-[20px] w-[20px] rounded-b-md bg-white"></div>
      <div class="absolute left-1/2 top-3/4 h-[40px] w-[50px] -translate-x-1/2 rounded-3xl bg-red-500"></div>
    </div>
  </div>
</div>

Result:

Smiley face made with TailwindCSS


This content originally appeared on DEV Community and was authored by Felipe Freitag Vargas


Print Share Comment Cite Upload Translate Updates
APA

Felipe Freitag Vargas | Sciencx (2025-01-22T14:13:28+00:00) Trying CSS art with Tailwind. Retrieved from https://www.scien.cx/2025/01/22/trying-css-art-with-tailwind/

MLA
" » Trying CSS art with Tailwind." Felipe Freitag Vargas | Sciencx - Wednesday January 22, 2025, https://www.scien.cx/2025/01/22/trying-css-art-with-tailwind/
HARVARD
Felipe Freitag Vargas | Sciencx Wednesday January 22, 2025 » Trying CSS art with Tailwind., viewed ,<https://www.scien.cx/2025/01/22/trying-css-art-with-tailwind/>
VANCOUVER
Felipe Freitag Vargas | Sciencx - » Trying CSS art with Tailwind. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/01/22/trying-css-art-with-tailwind/
CHICAGO
" » Trying CSS art with Tailwind." Felipe Freitag Vargas | Sciencx - Accessed . https://www.scien.cx/2025/01/22/trying-css-art-with-tailwind/
IEEE
" » Trying CSS art with Tailwind." Felipe Freitag Vargas | Sciencx [Online]. Available: https://www.scien.cx/2025/01/22/trying-css-art-with-tailwind/. [Accessed: ]
rf:citation
» Trying CSS art with Tailwind | Felipe Freitag Vargas | Sciencx | https://www.scien.cx/2025/01/22/trying-css-art-with-tailwind/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts