DailyDev Card

Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

This tailwind example is contributed by Ameth Galarcio, on 12-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Author box, User information,Product Showcase, Product card,simulation,copy,dummy,miniature,like

Card Avatar Hero Profile Team Other Product Mockup

Author Ameth Galarcio

Tailwind v3.4 2.3k 11

Fork Fullscreen

<div class="w-[340px] rounded-[42px] bg-white border-8 relative">
    
    <div class="flex flex-col">
      <div class="rounded-[32px] px-5 py-6"
        style="background-image: url('https://merehead.com/blog/wp-content/uploads/boliviainteligente-37WxvlfW3to-unsplash.jpg'); background-size: cover; background-position: center;">
        <img class="relative w-36 h-36 mb-8 bg-black z-20 rounded-[42px]  border-8 border-white -rotate-12" src="https://firebasestorage.googleapis.com/v0/b/amethgalarcio.appspot.com/o/profile%2Favatar-profile.png?alt=media&token=d71ce5b4-e975-4a63-9b77-840ece905152"/>
      </div>
      
      <div
        class="bg-gray-800 py-2 shadow-2xl rounded-2xl absolute top-44 left-1/2 transform -translate-x-1/2 w-[calc(100%_-_16px)] z-10">
        <div class="text-white text-lg font-bold flex justify-between px-6">
          <div class="flex flex-col gap-0">
            10
            <div class="text-xs text-gray-400 flex gap-1">
              <div class="bg-[#7147ed] rounded-full aspect-square w-4 h-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-7.5 -3.5 24 24">
                  <path fill="#1f2937"
                    d="M5.708 4.968h1.789a1.5 1.5 0 0 1 1.378 2.09l-3.96 9.243a1.049 1.049 0 0 1-2.012-.413v-6.92L1.45 8.923A1.5 1.5 0 0 1 0 7.423V1.5A1.5 1.5 0 0 1 1.5 0h2.708a1.5 1.5 0 0 1 1.5 1.5z" />
                </svg>
              </div>
              <p>
                Reputacion
              </p>
            </div>
          </div>
          <div class="flex flex-col gap-0">
            33
            <div class="text-xs text-gray-400 flex gap-1">
              <div class="bg-[#fc538d] rounded-full aspect-square w-4 h-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
                  <path fill="#1f2937"
                    d="M17.66 11.2c-.23-.3-.51-.56-.77-.82c-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32c-2.59 2.08-3.61 5.75-2.39 8.9c.04.1.08.2.08.33c0 .22-.15.42-.35.5c-.23.1-.47.04-.66-.12a.6.6 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5c.14.6.41 1.2.71 1.73c1.08 1.73 2.95 2.97 4.96 3.22c2.14.27 4.43-.12 6.07-1.6c1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6c-1.12.4-2.24-.16-2.9-.82c1.19-.28 1.9-1.16 2.11-2.05c.17-.8-.15-1.46-.28-2.23c-.12-.74-.1-1.37.17-2.06c.19.38.39.76.63 1.06c.77 1 1.98 1.44 2.24 2.8c.04.14.06.28.06.43c.03.82-.33 1.72-.93 2.27" />
                </svg>
              </div>
              <p class="text-xs text-gray-400">
                Long streak
              </p>
            </div>

</div>
          <div class="flex flex-col gap-0">
            252
            <div class="text-xs text-gray-400 flex gap-1">
              <div class="rounded-full aspect-square w-4 h-4">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
                  <path fill-rule="evenodd"
                    d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4c0-2.2 1.8-4 4-4c2.22 0 4 1.8 4 4c0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2c-1.11 0-2-.89-2-2c0-1.11.89-2 2-2c1.11 0 2 .89 2 2z"
                    fill="#ce3df3" />
                </svg>
              </div>
              <p class="text-xs text-gray-400">
                Posts read
              </p>
            </div>

</div>

</div>
      </div>
    </div>

<div class="mt-8 py-4 border-b mx-6 border-gray-300">
      <h1 class="font-bold text-3xl">
        Ameth Galarcio
      </h1>
      <p class="text-gray-500 text-sm">
        @ameth1208
        <span class="text-gray-400">
          Aug 14, 2024
        </span>
      </p>
    </div>
    
    <ul class="flex flex-wrap gap-2 px-6 py-2 border-b">
      <li class="rounded-lg border border-gray-500 px-2 py-1 text-xs font-bold">
        #tailwind_flex
      </li>
      <li class="rounded-lg border border-gray-500 px-2 py-1 text-xs font-bold">
        #web_dev
      </li>
      <li class="rounded-lg border border-gray-500 px-2 py-1 text-xs font-bold">
        #react
      </li>
      <li class="rounded-lg border border-gray-500 px-2 py-1 text-xs font-bold">
        #dev_tools
      </li>
      <li class="rounded-lg border border-gray-500 px-2 py-1 text-xs font-bold">
        #ai
      </li>
    </ul>

</div>
      <div class="bg-black/90 text-white flex items-center px-2 rounded-tl-3xl rounded-br-3xl">
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
          <g fill="#FFF" fill-rule="evenodd">
            <path
              d="m31.48 19.944-3.533-3.533 1.765-3.531 5.74 5.74a1.873 1.873 0 0 1 0 2.648l-7.065 7.064a1.873 1.873 0 0 1-2.648-2.648l5.74-5.74Z"
              opacity=".56" />
            <path
              d="M25.74 11.548a1.873 1.873 0 0 1 2.649 0l1.324 1.325-15.452 15.452a1.873 1.873 0 0 1-2.649 0l-1.324-1.324L25.74 11.548Zm-6.622 4.857-2.65 2.649-3.532-3.533-4.415 4.416 3.532 3.532-1.765 3.532-5.74-5.74a1.873 1.873 0 0 1 0-2.648l7.064-7.064a1.873 1.873 0 0 1 2.65 0l4.856 4.856Z" />
          </g>
        </svg>
        daily.dev
      </div>
    </div>
  </div>

</div>

Related Examples

Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Profile card
Profile card with social icons

Krishna Gudpalle

4 years ago

13.6k
User Profile Card
The card features a user's profile picture, name, location, and options for interactions. It has a clean and modern design with rounded edges and icons for user engagement. It also has support for dark mod:

Prashant

4 years ago

65.5k
User profile card with Cover Image

Noob

3 years ago

33.8k
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.2k
Minimal Profile card

Abhijit Sen

3 years ago

12.3k
Responsive user card with tailwind

Gopi Yadav

3 years ago

11.9k
Author box

Mr Robot

3 years ago

12.5k
Profile card

Mr Robot

3 years ago

13.4k
User profile card

Mr Robot

3 years ago

11.9k
Product card

Simon Scheffer

3 years ago

32.4k