-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
85 lines (80 loc) · 4.03 KB
/
test.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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid lg:grid-cols-2 gap-6">
<!-- Card -->
<a class="group relative block rounded-xl focus:outline-none" href="#">
<div class="shrink-0 relative rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-gray-900/70">
<img class="size-full absolute top-0 start-0 object-cover" src="https://images.unsplash.com/photo-1669828230990-9b8583a877ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Blog Image">
</div>
<div class="absolute top-0 inset-x-0 z-10">
<div class="p-4 flex flex-col h-full sm:p-6">
<!-- Avatar -->
<div class="flex items-center">
<div class="shrink-0">
<img class="size-[46px] border-2 border-white rounded-full" src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
</div>
<div class="ms-2.5 sm:ms-4">
<h4 class="font-semibold text-white">
Gloria
</h4>
<p class="text-xs text-white/80">
Jan 09, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
<div class="absolute bottom-0 inset-x-0 z-10">
<div class="flex flex-col h-full p-4 sm:p-6">
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/80 group-focus:text-white/80">
Facebook is creating a news section in Watch to feature breaking news
</h3>
<p class="mt-2 text-white/80">
Facebook launched the Watch platform in August
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group relative block rounded-xl focus:outline-none" href="#">
<div class="shrink-0 relative rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-gray-900/70">
<img class="size-full absolute top-0 start-0 object-cover" src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Blog Image">
</div>
<div class="absolute top-0 inset-x-0 z-10">
<div class="p-4 flex flex-col h-full sm:p-6">
<!-- Avatar -->
<div class="flex items-center">
<div class="shrink-0">
<img class="size-[46px] border-2 border-white rounded-full" src="https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
</div>
<div class="ms-2.5 sm:ms-4">
<h4 class="font-semibold text-white">
Gloria
</h4>
<p class="text-xs text-white/80">
May 30, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
<div class="absolute bottom-0 inset-x-0 z-10">
<div class="flex flex-col h-full p-4 sm:p-6">
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/80 group-focus:text-white/80">
What CFR (Conversations, Feedback, Recognition) really is about
</h3>
<p class="mt-2 text-white/80">
For a lot of people these days, Measure What Matters.
</p>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->