buidling a card with tailwind css

Solutions on MaxInterview for buidling a card with tailwind css by the best coders in the world

showing results for - "buidling a card with tailwind css"
26 Oct 2018
1<!doctype html>
2<html lang="en">
3<head>
4  <!-- Required meta tags -->
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7
8  <!-- Tailwind CSS -->
9  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
10
11
12  <title>Tailwind CSS CDN</title>
13</head>
14<body>
15
16
17  <div class="p-10">
18    <!--Card 1-->
19    <div class=" w-full lg:max-w-full lg:flex">
20      <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden" style="background-image: url('/mountain.jpg')" title="Mountain">
21      </div>
22      <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4 flex flex-col justify-between leading-normal">
23        <div class="mb-8">
24          <p class="text-sm text-gray-600 flex items-center">
25            <svg class="fill-current text-gray-500 w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
26              <path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z" />
27            </svg>
28            Members only
29          </p>
30          <div class="text-gray-900 font-bold text-xl mb-2">Best Mountain Trails 2020</div>
31          <p class="text-gray-700 text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
32        </div>
33        <div class="flex items-center">
34          <img class="w-10 h-10 rounded-full mr-4" src="/ben.png" alt="Avatar of Writer">
35          <div class="text-sm">
36            <p class="text-gray-900 leading-none">John Smith</p>
37            <p class="text-gray-600">Aug 18</p>
38          </div>
39        </div>
40      </div>
41    </div>
42  </div>
43
44</body>
45</html>
source