Samenflug UI Library v0.3
Home Astro UI Components

Finally Tuesday

Ah, Tuesday – often overlooked in the shadow of Monday and the anticipation of the midweek. Yet, Tuesday stands as a beacon of productivity. It’s the day when the rhythm of the week often truly sets in. Tuesday embodies potential and progress, making it a cornerstone for achieving weekly goals.

To honor the spirit of Tuesday, here’s an Tailwind CSS based UI component that encapsulates its essence.

Rendered Component

It's
Tuesday!
Ye-Ha!
★
woo
hoo
2024
April
Boom!
Finally
Tuesday
The Tuesday
Feeling!

Component Code

#tailwind

---
// Tuesday v1.2
const { ...attr } = Astro.props
---


<div {...attr}>
  <div class="aspect-[3/5] w-full [container-type:size]">
    <div class="relative h-full w-full overflow-hidden rounded-[3cqw] border-[1cqw] border-gray-800 bg-lime-400 font-bold text-white shadow-2xl">
      <div class="flex h-[15cqw] w-full justify-between p-[3cqw]">
        <div class="text-[5cqw] leading-[5cqw]">It's <br />Tuesday!</div>
        <div class="mt-[2cqw] text-[12cqw] leading-[12cqw]">Ye-Ha!</div>
      </div>
      <div class="w-full p-[5cqw] text-[5cqw] text-gray-800">★</div>
      <div class="relative -left-[30cqw] w-[160cqw] text-center text-[70cqw] leading-[50cqw]">woo</div>
      <div class="relative -left-[30cqw] w-[160cqw] text-center text-[70cqw] leading-[50cqw]">hoo</div>
      <div class="absolute bottom-[3cqw] flex h-[15cqw] w-full justify-between p-[3cqw]">
        <div class="text-[5cqw] leading-[5cqw]">2024<br />April</div>
        <div class="text-[12cqw] leading-[14cqw]">Boom!</div>
      </div>
      <div class="absolute -right-[4cqw] top-[57cqw] flex w-full flex-col text-gray-800">
        <div class="text-right text-[20cqw] leading-[23cqw]">Finally</div>
        <div class="text-right text-[20cqw] leading-[20cqw]">Tuesday</div>
      </div>
      <div class="absolute left-[7cqw] top-[116cqw] flex w-full flex-col text-gray-800">
        <div class="text-[5cqw] leading-[5cqw]">The Tuesday</div>
        <div class="text-[5cqw] leading-[5cqw]">Feeling!</div>
      </div>
    </div>
  </div>
</div>

References