forked from thedevdojo/tails-components
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontent-course.html
116 lines (115 loc) · 8.51 KB
/
content-course.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<div class="bg-gray-100 py-12">
<div class="flex flex-col justify-center items-center container px-4 pt-2 pb-8 mx-auto sm:px-6 lg:px-8">
<p class="inline-block px-3 py-1 leading-tight mb-4 text-xs font-semibold tracking-widest text-indigo-700 uppercase rounded-full bg-indigo-200">
Watch And Learn with our
</p>
<h2 class="text-center b-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto flex justify-center">
<svg class="w-8 h-8 mr-3 mt-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"></path></svg>
<span class="relative">Our Latest Courses</span> </h2>
<a href="#" class="text-sm font-semibold text-indigo-600 underline mt-3">View our full library of courses</a>
<div class="grid max-w-lg gap-5 mx-auto mt-12 md:grid-cols-2 lg:grid-cols-3 md:max-w-none">
<div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
<div class="relative flex-shrink-0">
<img class="object-cover w-full h-56" src="https://cdn.devdojo.com/episode/images/August2020/laravel-livewire-introduction1.jpg" alt="" />
<span class="absolute bottom-0 right-0 inline-flex items-center px-3 py-1 mr-4 -mb-3 text-xs font-medium leading-tight text-gray-800 bg-gray-100 border rounded-full">12 reviews</span>
</div>
<div class="flex flex-col justify-between flex-1">
<div class="flex flex-col justify-between flex-1 p-6 bg-white">
<div>
<a href="#" class="block text-xl font-semibold leading-7 text-gray-900">Mastering Livewire</a>
<p class="mt-3 text-base leading-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<p class="mt-3 text-sm font-medium leading-5">
<a href="#" class="inline-block">
<span class="inline-flex items-center px-3 py-1 text-xs font-medium leading-tight text-blue-800 bg-blue-100 rounded-full">Livewire</span>
</a>
</p>
</div>
<div class="flex items-center p-6 bg-gray-100">
<div class="flex-shrink-0">
<a href="#">
<img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium leading-5 text-gray-900">
<a href="#" class="hover:underline">Tom Cook</a>
</p>
<div class="text-xs leading-5 text-gray-600">
<time>Mid Summer, 2020</time>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
<div class="relative flex-shrink-0">
<img class="object-cover w-full h-56" src="https://cdn.devdojo.com/images/September2017/creating-a-laravel-package-sd.jpg" alt="" />
<span class="absolute bottom-0 right-0 inline-flex items-center px-3 py-1 mr-4 -mb-3 text-xs font-medium leading-tight text-gray-800 bg-gray-100 border rounded-full">16 reviews</span>
</div>
<div class="flex flex-col justify-between flex-1">
<div class="flex flex-col justify-between flex-1 p-6 bg-white">
<div>
<a href="#" class="block text-xl font-semibold leading-7 text-gray-900">Create a Laravel Package</a>
<p class="mt-3 text-base leading-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<p class="mt-3 text-sm font-medium leading-5">
<a href="#" class="inline-block">
<span class="inline-flex items-center px-3 py-1 text-xs font-medium leading-tight text-red-800 bg-red-100 rounded-full">Laravel</span>
</a>
</p>
</div>
<div class="flex items-center p-6 bg-gray-100">
<div class="flex-shrink-0">
<a href="#">
<img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium leading-5 text-gray-900">
<a href="#" class="hover:underline">Margot Foster</a>
</p>
<div class="text-xs leading-5 text-gray-600">
<time>Jun 4, 2020</time>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
<div class="relative flex-shrink-0">
<img class="object-cover w-full h-56" src="https://cdn.devdojo.com//images/March2017/laravel-dusk-sd.jpg" alt="" />
<span class="absolute bottom-0 right-0 inline-flex items-center px-3 py-1 mr-4 -mb-3 text-xs font-medium leading-tight text-gray-800 bg-gray-100 border rounded-full">22 reviews</span>
</div>
<div class="flex flex-col justify-between flex-1">
<div class="flex flex-col justify-between flex-1 p-6 bg-white">
<div>
<a href="#" class="text-xl font-semibold leading-7 text-gray-900">Laravel Dusk</a>
<p class="mt-3 text-base leading-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<p class="mt-3 text-sm font-medium leading-5">
<a href="#" class="inline-block">
<span class="inline-flex items-center px-3 py-1 text-xs font-medium leading-tight text-orange-800 bg-orange-100 rounded-full">Eloquent</span>
</a>
</p>
</div>
<div class="flex items-center p-6 bg-gray-100">
<div class="flex-shrink-0">
<a href="#">
<img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="" />
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium leading-5 text-gray-900">
<a href="#" class="hover:underline">John Cooper</a>
</p>
<div class="text-xs leading-5 text-gray-600">
<time>Jun 3, 2020</time>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>