-
Notifications
You must be signed in to change notification settings - Fork 371
/
Copy pathcard-boxes.html
44 lines (44 loc) · 2.62 KB
/
card-boxes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 sm:flex-row">
<div class="p-4 sm:w-1/2 lg:w-1/3">
<div class="flex flex-col overflow-hidden transition duration-500 ease-in-out transform bg-white rounded-lg shadow-2xl hover:scale-105">
<img class="h-56 rounded-t-lg" alt="article image"
src="https://images.unsplash.com/photo-1472437774355-71ab6752b434?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80">
<div class="px-6 pt-4 mb-2 text-xl font-bold">
<span>Introduction to HTML</span>
</div>
<div class="px-6 pt-2">
<small>John Doe | 2020-10-06</small>
<div class="overflow-hidden h-16 ...">HTML Introduction for beginner.</div>
</div>
<div class="px-6 pb-4">
<a href="#"
class="inline-block px-3 py-1 my-1 mr-2 text-sm font-semibold text-white bg-teal-400 rounded-full">#HTML</a>
<a href="#"
class="inline-block px-3 py-1 my-1 mr-2 text-sm font-semibold text-white bg-teal-400 rounded-full">#CSS</a>
<a href="#"
class="inline-block px-3 py-1 my-1 mr-2 text-sm font-semibold text-white bg-teal-400 rounded-full">#Web</a>
</div>
</div>
</div>
<div class="p-4 sm:w-1/2 lg:w-1/3">
<div class="flex flex-col overflow-hidden transition duration-500 ease-in-out transform bg-white rounded-lg shadow-2xl hover:scale-105">
<img class="h-56 rounded-t-lg" alt="article image"
src="https://images.unsplash.com/photo-1593720219276-0b1eacd0aef4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1343&q=80">
<div class="px-6 pt-4 mb-2 text-xl font-bold">
<span>Introduction to HTML</span>
</div>
<div class="px-6 pt-2">
<small>John Doe | 2020-10-06</small>
<div class="overflow-hidden h-16 ...">HTML Introduction for beginner.</div>
</div>
<div class="px-6 pb-4">
<a href="#"
class="inline-block px-3 py-1 my-1 mr-2 text-sm font-semibold text-white bg-teal-400 rounded-full">#HTML</a>
<a href="#"
class="inline-block px-3 py-1 my-1 mr-2 text-sm font-semibold text-white bg-teal-400 rounded-full">#CSS</a>
<a href="#"
class="inline-block px-3 py-1 my-1 mr-2 text-sm font-semibold text-white bg-teal-400 rounded-full">#Web</a>
</div>
</div>
</div>
</div>