Home
Ameth Galarcio
DailyDev Card

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 CSS v3. 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

1.7k

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