Home
Cristian
Card

Card

amazing card

This tailwind example is contributed by Cristian, on 29-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card,Article Card, Blog page card, Article card

Card Product Blog Card

Author Cristian

2.5k

Fork Fullscreen

<section class="flex justify-center items-center min-h-screen bg-white font-lato">
  <div class="py-20 md:py-8 w-[90%] max-w-[76.5rem] mx-auto text-[#111]">
    <h2 class="capitalize tracking-[0.025em] text-[clamp(2rem,1.8125rem+0.75vw,2.6rem)]">leading companies<br />have trusted us</h2>
    
    <div class="container mt-10 grid gap-8 grid-cols-[repeat(auto-fit,minmax(16rem,1fr))]">
      <div class="card">
        <div class="card-inner relative w-full h-[18.75rem] bg-white rounded-2xl overflow-hidden">
          <div class="box w-full h-full bg-white rounded-2xl overflow-hidden">
            <div class="imgBox absolute inset-0">
              <img class="w-full h-full object-cover" src="https://img.freepik.com/free-photo/lake-with-lots-green-trees-reflected-water-chisinau-moldova_1268-16592.jpg?t=st=1730201653~exp=1730205253~hmac=235d8c2d9698a5f50dda6a870703d3c4d3a9c360f97c4a688f1abe2bfb509152&w=1380" alt="Trust & Co." />
            </div>
            <div class="icon absolute bottom-[-0.375rem] right-[-0.375rem] w-24 h-24 bg-[#d3b19a] rounded-tl-full flex justify-center items-center transition-transform hover:scale-110">
              <a href="#" class="iconBox w-full h-full flex justify-center items-center text-white text-2xl rounded-full">
                <span class="material-symbols-outlined">arrow_outward</span>
              </a>
            </div>
          </div>
        </div>
        <div class="content py-4 px-2.5">
          <h3 class="capitalize text-[clamp(1.5rem,1.3909rem+0.4364vw,1.8rem)]">trust & co.</h3>
          <p class="my-4 text-[#565656]">Fill out the form and the algorithm will offer the right team of experts</p>
          <ul class="flex flex-wrap gap-2">
            <li class="uppercase font-bold text-xs text-[#282828] bg-[#d3b19a] px-2 py-1 rounded">branding</li>
            <li class="uppercase font-bold text-xs text-[#282828] bg-[#70b3b1] px-2 py-1 rounded">packaging</li>
          </ul>
        </div>
      </div>
      
      
      
    </div>
  </div>
</section>

Related Examples