Home
Dmitriy Dronov
Tour package card

Tour package card

Forked from> @henrik/tour-package-card

This card could be used for featuring a product, service, or blog post:

This tailwind example is contributed by Dmitriy Dronov, on 28-Sep-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Dmitriy Dronov

102

Fork Fullscreen

<div class="flex justify-center items-center min-h-screen bg-gradient-to-br from-purple-100 to-indigo-200 p-4">
  <div class="w-full bg-white rounded-xl shadow-2xl overflow-hidden transform transition duration-500 hover:scale-105">
    <div class="p-6">
      <div class="flex items-center mb-4">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#475467" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="text-gray-600 font-medium ml-1 mr-4">13:00 cегодня</span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 8H16V12" fill="#475467"/>
          <path d="M11 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V13M12 8H16V12M15.5 3.5V2M19.4393 4.56066L20.5 3.5M20.5103 8.5H22.0103M3 13.3471C3.65194 13.4478 4.31987 13.5 5 13.5C9.38636 13.5 13.2653 11.3276 15.6197 8" stroke="#475467" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="text-gray-600 font-medium ml-1">454%</span>
      </div>
      <h2 class="text-2xl font-medium mb-2 text-gray-800">Пересечение границы Польша-Беларусь: время ожидания и особенности проезда</h2>
      <p class="text-gray-600 font-light mb-4">В чате обсуждались вопросы, связанные с пересечением границы Польши и Беларуси на автомобиле. Участники делились информацией о времени ожидания на границе, особенностях прохождения паспортного контроля, а также о работе транспортных компаний, осуществляющих перевозки пассажиров между странами.
      </p>
      <div class="flex justify-between items-center">
        <span></span>
        <button class="px-4 py-2 bg-indigo-600 text-white font-light rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75 transition duration-300 ease-in-out">
          Перейти к чату
        </button>
      </div>
    </div>
  </div>
</div>

Related Examples