Home
$@(\/)(\/)Y
Kids E-learning Platform Card

Kids E-learning Platform Card

Kids E-learning Platform Card Clone

This tailwind example is contributed by $@(\/)(\/)Y, on 13-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are copy,Article Card, Blog page card, Article card

Card Clone Blog Card

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

1.3k

Fork Fullscreen

<div class="w-full h-full bg-light pt-10 pb-32">
  <div class="w-full h-full bg-light flex flex-col gap-4 items-center justify-center px-2">
    <h1 class="md:text-6xl text-4xl font-display text-gray-900">School classes</h1>
    <p class="text-center px-4 text-gray-500">The school offers a vibrant kids' class, teaching athletics, language, dance, art, drawing, and more, fostering creativity and skills.</p>
  
  <div class="xl:w-[90%] w-full mx-auto grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6 place-items-center justify-center px-4 pt-6">
    
    <div class="w-full h-full flex flex-col rounded-lg">
      <div class="relative top-6 pt-6 px-8 z-10">
        <img class="sm:w-[20rem] sm:h-[20rem] xs:w-[16rem] xs:h-[16rem] w-[10rem] h-[10rem] mx-auto object-cover rounded-full outline outline-[1rem] outline-lightOrange/10 shadow-4xl" src="https://images.unsplash.com/photo-1554343594-1c9d305bd51f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxNHx8YXJ0JTIwa2lkfGVufDB8MHx8fDE3MzE0MTM2NzN8MA&ixlib=rb-4.0.3&q=80&w=1080" />
      </div>
      
      <div class="w-full flex flex-col gap-4 rounded-xl bg-lightOrange/10 pt-8 px-6 ">
        
        <h2 class="text-center text-bsDark sm:text-3xl text-2xl  mt-8 font-display">Art & Drawing</h2>
        
        <div class="w-full flex items-center justify-between pt-2 pb-2">
          <div class="flex gap-4">
            
            <img class="w-[3.5rem] h-[3.5rem] object-cover rounded-full" src="https://techakim.com/sam/tg/7268/li/imgs/leo-happy-father-2.jpg" />
            
            <div class="flex flex-col gap-1 font-sans">
              <h2 class="sm:text-lg text-sm text-fontOrange font-semibold">Samuel Abera</h2>
              <p class="text-gray-500 sm:text-base text-sm">Teacher</p>
            </div>
          </div>
          
          <div>
            <h3 class="px-2 py-1 bg-fontOrange text-white sm:text-lg text-sm rounded-3xl">$99</h3>
          </div>
        </div>
        
        <div class="w-full flex justify-center pb-4 font-body">
          
          <div class="w-full flex flex-col border-t-[3.3px] border-orange-500">
            <h2 class="sm:text-lg text-sm text-lightOrange">Age:</h2>
            <p class="text-gray-600 sm:text-base text-sm">3-5 Years</p>
          </div>
          
          <div class="w-full flex flex-col border-t-[3.3px] border-green-700 mx-1">
            <h2 class="sm:text-lg text-sm text-green-700">Time:</h2>
            <p class="text-gray-600 sm:text-base text-sm">9-10 AM</p>
          </div>
          
          <div class="w-full flex flex-col border-t-[3.3px] border-yellow-500">
            <h2 class="sm:text-lg text-sm text-yellow-500">Capacity:</h2>
            <p class="text-gray-600 sm:text-base text-sm">30 Kids</p>
          </div>
        </div>
      </div>
    </div>

<div class="w-full h-full flex flex-col rounded-lg">
      <div class="relative top-6 pt-6 px-8 z-10">
        <img class="sm:w-[20rem] sm:h-[20rem] xs:w-[16rem] xs:h-[16rem] w-[10rem] h-[10rem] mx-auto object-cover rounded-full outline outline-[1rem] outline-lightOrange/10 shadow-4xl" src="https://images.unsplash.com/photo-1583468982228-19f19164aee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwzfHxraWRzJTIwbGVhcm5pbmd8ZW58MHwwfHx8MTczMTQxOTY1N3ww&ixlib=rb-4.0.3&q=80&w=1080" />
      </div>
      
      <div class="w-full flex flex-col gap-4 rounded-xl bg-lightOrange/10 pt-8 px-6 ">
        
        <h2 class="text-center text-bsDark sm:text-3xl text-2xl  mt-8 font-display">Language & Speaking</h2>
        
        <div class="w-full flex items-center justify-between pt-2 pb-2">
          <div class="flex gap-4">
            
            <img class="w-[3.5rem] h-[3.5rem] object-cover rounded-full" src="https://techakim.com/sam/tg/7268/li/imgs/happy_father.png" />
            
            <div class="flex flex-col gap-1 font-sans">
              <h2 class="sm:text-lg text-sm text-fontOrange font-semibold">Samuel Abera</h2>
              <p class="text-gray-500 sm:text-base text-sm">Teacher</p>
            </div>
          </div>
          
          <div>
            <h3 class="px-2 py-1 bg-fontOrange text-white sm:text-lg text-sm rounded-3xl">$99</h3>
          </div>
        </div>
        
        <div class="w-full flex justify-center pb-4 font-body">
          
          <div class="w-full flex flex-col border-t-[3.3px] border-orange-500">
            <h2 class="sm:text-lg text-sm text-fontOrange">Age:</h2>
            <p class="text-gray-600 sm:text-base text-sm">3-5 Years</p>
          </div>
          
          <div class="w-full flex flex-col border-t-[3.3px] border-green-700 mx-1">
            <h2 class="sm:text-lg text-sm text-green-700">Time:</h2>
            <p class="text-gray-600 sm:text-base text-sm">9-10 AM</p>
          </div>
          
          <div class="w-full flex flex-col border-t-[3.3px] border-yellow-500">
            <h2 class="sm:text-lg text-sm text-yellow-500">Capacity:</h2>
            <p class="text-gray-600 sm:text-base text-sm">30 Kids</p>
          </div>
        </div>
      </div>
    </div>

<div class="w-full h-full flex flex-col rounded-lg">
      <div class="relative top-6 pt-6 px-8 z-10">
        <img class="sm:w-[20rem] sm:h-[20rem] xs:w-[16rem] xs:h-[16rem] w-[10rem] h-[10rem] mx-auto object-cover rounded-full outline outline-[1rem] outline-lightOrange/10 shadow-4xl" src="https://images.unsplash.com/photo-1528808302-cddd825c94fd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxM3x8ZGFuY2VyJTIwa2lkfGVufDB8MHx8fDE3MzE0MTk3OTd8MA&ixlib=rb-4.0.3&q=80&w=1080" />
      </div>
      
      <div class="w-full flex flex-col gap-4 rounded-xl bg-lightOrange/10 pt-8 px-6 ">
        
        <h2 class="text-center text-bsDark sm:text-3xl text-2xl mt-8 font-display">Athletic & Dance</h2>
        
        <div class="w-full flex items-center justify-between pt-2 pb-2">
          <div class="flex gap-4">
            
            <img class="w-[3.5rem] h-[3.5rem] object-cover rounded-full" src="https://techakim.com/sam/tg/7268/li/imgs/leo-happy-father-3.jpg" />
            
            <div class="flex flex-col gap-1 font-sans">
              <h2 class="sm:text-lg text-sm text-fontOrange font-semibold">Samuel Abera</h2>
              <p class="text-gray-500 sm:text-base text-sm">Teacher</p>
            </div>
          </div>
          
          <div>
            <h3 class="px-2 py-1 bg-fontOrange text-white sm:text-lg text-sm rounded-3xl">$99</h3>
          </div>
        </div>
        
        <div class="w-full flex justify-center pb-4 font-body">
          
          <div class="w-full flex flex-col border-t-[3.3px] border-orange-500">
            <h2 class="sm:text-lg text-sm text-fontOrange">Age:</h2>
            <p class="text-gray-600 sm:text-base text-sm">3-5 Years</p>
          </div>
          
          <div class="w-full flex flex-col border-t-[3.3px] border-green-700 mx-1">
            <h2 class="sm:text-lg text-sm text-green-700">Time:</h2>
            <p class="text-gray-600 sm:text-base text-sm">9-10 AM</p>
          </div>
          
          <div class="w-full flex flex-col border-t-[3.3px] border-yellow-500">
            <h2 class="sm:text-lg text-sm text-yellow-500">Capacity:</h2>
            <p class="text-gray-600 sm:text-base text-sm">30 Kids</p>
          </div>
        </div>
      </div>
    </div>

</div>

</div>
</div>

Related Examples