Home
Maxim
Card 30/70

Card 30/70

This tailwind example is contributed by Maxim, on 01-Apr-2025. Component is made with Tailwind CSS v3. It is responsive.

Card Grid

Author Maxim

Fork Fullscreen

<div class="max-w-4xl mx-auto my-8">
  
  <div class="bg-gray-100 rounded-lg overflow-hidden">
    <div class="flex flex-col md:flex-row">
      <div class="md:w-3/10 w-full">
        <img src="https://www.matterhornparadise.ch/ZBAG/00-keyvisuals/02-winter/35156/image-thumb__35156__img-slider/290124_ski_sued-9@2x.webp" alt="Placeholder image" class="w-full h-full object-cover">
      </div>
      <div class="md:w-7/10 w-full p-4 md:p-8">
        <h2 class="text-2xl md:text-4xl font-bold text-gray-800 mb-2 md:mb-4">
          <a href="#" class="hover:text-blue-700">Winterabenteuer in den Alpen</a>
        </h2>
        
        <p class="text-sm md:text-base text-gray-700">
          Erleben Sie unvergessliche Winterlandschaften und aufregende Abfahrten in den besten Skigebieten. Genießen Sie die frische Bergluft, erobern Sie schneebedeckte Gipfel und spüren Sie den echten Nervenkitzel beim Skifahren und Snowboarden.
        </p>
      </div>
    </div>
  </div>
  
  
  <div class="bg-gray-100 rounded-lg overflow-hidden mt-4 md:mt-8">
    <div class="flex flex-col md:flex-row">
      <div class="md:w-3/10 w-full">
        <img src="https://www.matterhornparadise.ch/ZBAG/05-skifahren/ski/01-nord/2019/image-thumb__2019__img-slider/ZBAG%20Ski%20Nord%20-49@2x.webp" alt="Placeholder image" class="w-full h-full object-cover">
      </div>
      <div class="md:w-7/10 w-full p-4 md:p-8">
        <h2 class="text-2xl md:text-4xl font-bold text-gray-800 mb-2 md:mb-4">
          <a href="#" class="hover:text-blue-700">Skifahren: Freiheit der Bewegung</a>
        </h2>
        
        <p class="text-sm md:text-base text-gray-700">
          Spüren Sie Geschwindigkeit, Freiheit und Adrenalin auf perfekt präparierten Pisten. Unabhängig von Ihrem Erfahrungslevel bieten die Alpen eine Vielzahl von Routen – von sanften Hängen für Anfänger bis hin zu extremen Abfahrten für Profis.
        </p>
      </div>
    </div>
  </div>
</div>

Related Examples