DEV Community

Cover image for Trying CSS art with Tailwind
Felipe Freitag Vargas
Felipe Freitag Vargas

Posted on

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.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>
Enter fullscreen mode Exit fullscreen mode

Result:

Smiley face made with TailwindCSS

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay