Corner Ribbon Using Tailwind UI

A corner ribbon created with Tailwind adds a stylish and eye-catching element to your content, perfect for highlighting special offers or important messages.

ribbon

Loading component...

index.html

54 lines

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<section
  class="flex flex-col items-center justify-center w-screen space-y-4 md:flex-row md:space-y-0 md:space-x-4 md:h-screen">
  <div class="relative w-64 h-64 overflow-hidden bg-white border">
    <img class="object-cover"
      src="https://images.unsplash.com/photo-1694807865565-70252084fa27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1372&q=80"
      alt="">
    <div class="absolute top-0 left-0 w-16 h-16">
      <div
        class="bg-indigo-700 absolute transform -rotate-45 text-center text-white font-semibold py-1 left-[-40px] top-[32px] w-[170px]">
        Popular
      </div>
    </div>
  </div>

  <div class="relative w-64 h-64 overflow-hidden bg-white border">
    <img class="object-cover"
      src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8Zm9vZHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60"
      alt="">
    <div class="absolute bottom-0 left-0 w-16 h-16">
      <div
        class="bg-indigo-700 absolute transform rotate-45 text-center text-white font-semibold py-1 left-[-40px] bottom-[32px] w-[170px]">
        Popular
      </div>
    </div>
  </div>

  <div class="relative w-64 h-64 overflow-hidden bg-white border">
    <img class="object-cover"
      src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
      alt="">
    <div class="absolute top-0 right-0 w-16 h-16">
      <div
        class="bg-indigo-700 absolute transform rotate-45 text-center text-white font-semibold py-1 right-[-40px] top-[32px] w-[170px]">
        Popular
      </div>
    </div>
  </div>

  <div class="relative w-64 h-64 overflow-hidden bg-white border">
    <img class="object-cover"
      src="https://images.unsplash.com/photo-1497034825429-c343d7c6a68f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjV8fGZvb2R8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60"
      alt="">
    <div class="absolute bottom-0 right-0 w-16 h-16">
      <div
        class="bg-indigo-700 absolute transform -rotate-45 text-center text-white font-semibold py-1 right-[-40px] bottom-[32px] w-[170px]">
        Popular
      </div>
    </div>
  </div>

</section>

Corner Ribbon Using Tailwind UI

Preview - Corner Ribbon Using Tailwind UI