Home
Samuel Abera
Kids E-learning Platform Card

Kids E-learning Platform Card

Kids E-learning Platform Card Clone

This tailwind example is contributed by Samuel Abera, 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

Author Samuel Abera

740

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