-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtailwind-examples.html
137 lines (131 loc) · 8.39 KB
/
tailwind-examples.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href=https://stitches.hyperyolo.com/output.css rel="stylesheet">
<link rel="stylesheet" href=https://use.fontawesome.com/releases/v5.6.3/css/all.css integrity=sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/ crossorigin="anonymous">
<title>Stitches</title>
</head>
<body><section class="antialiased font-sans w-full bg-gray-300 text-left text-black py-8">
<div class="container mx-auto max-w-xl py-8 font-normal leading-normal">
<h3 class="text-2xl">Grow Your Business</h3>
<p class="">Build high performing teams, establish design practices, mentor and grow the next generation of great designers, and design interfaces and experiences.</p>
<div class="max-w-sm mt-4 sm:flex">
<input type="email" class="block w-full focus:outline-0 bg-white py-3 px-6 mb-2 sm:mb-0" name="email" placeholder="Enter your email" required="">
<button class="uppercase text-sm text-white focus:outline-0 w-full sm:w-auto bg-black hover:bg-gray-900 focus:bg-gray-300 tracking-wide px-6">Subscribe</button>
</div>
</div>
</section><section class="font-sans text-center py-8 px-4 lg:px-0 bg-gray-300">
<div class="container flex flex-col sm:flex-row bg-white max-w-xl m-auto shadow">
<div class="w-full sm:w-3/4 px-6 pt-6 text-left flex flex-col justify-center">
<h2 class="capitalize font-medium">Ready to get started?</h2>
<p class="text-gray-700 mt-2 mb-6">But I must explain to you how all this mistaken idea of denouncing </p>
</div>
<div class="w-full sm:w-1/4 flex justify-start sm:justify-center items-center pl-6 pb-6 sm:pl-0 sm:pb-0">
<button class=" bg-black hover:bg-gray-900 text-white hover:text-white py-3 px-6 uppercase text-xs tracking-wide">Learn More</button>
</div>
</div>
</section><section class="bg-white py-4 font-sans">
<div class="container max-w-xl m-auto flex flex-wrap items-center justify-start">
<div class="w-full md:w-1/2 lg:w-1/3 flex flex-col mb-8 px-3">
<div class="overflow-hidden bg-white rounded-lg shadow hover:shadow-raised hover:translateY-2px transition">
<img class="w-full" src="https://source.unsplash.com/random/400x225" alt="Sunset in the mountains">
<div class="p-6 flex flex-col justify-between ">
<h3 class="font-medium text-gray-900 mb-4 leading-normal">Desktop Publishing Software like Aldus PageMaker
</h3>
<p class="inline-flex items-center">
<span class="text-gray-700 text-sm">Read More</span>
</p>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 flex flex-col mb-8 px-3">
<div class="overflow-hidden bg-white rounded-lg shadow hover:shadow-raised hover:translateY-2px transition">
<img class="w-full" src="https://source.unsplash.com/random/400x225" alt="Sunset in the mountains">
<div class="p-6 flex flex-col justify-between ">
<h3 class="font-medium text-gray-900 mb-4 leading-normal">Desktop Publishing Software like Aldus PageMaker
</h3>
<p class="inline-flex items-center">
<span class="text-gray-700 text-sm">Read More</span>
</p>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 flex flex-col mb-8 px-3">
<div class="overflow-hidden bg-white rounded-lg shadow hover:shadow-raised hover:translateY-2px transition">
<img class="w-full" src="https://source.unsplash.com/random/400x225" alt="Sunset in the mountains">
<div class="p-6 flex flex-col justify-between ">
<h3 class="font-medium text-gray-900 mb-4 leading-normal">Desktop Publishing Software like Aldus PageMaker
</h3>
<p class="inline-flex items-center">
<span class="text-gray-700 text-sm">Read More</span>
</p>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 flex flex-col mb-8 px-3">
<div class="overflow-hidden bg-white rounded-lg shadow hover:shadow-raised hover:translateY-2px transition">
<img class="w-full" src="https://source.unsplash.com/random/400x225" alt="Sunset in the mountains">
<div class="p-6 flex flex-col justify-between ">
<h3 class="font-medium text-gray-900 mb-4 leading-normal">Desktop Publishing Software like Aldus PageMaker
</h3>
<p class="inline-flex items-center">
<span class="text-gray-700 text-sm">Read More</span>
</p>
</div>
</div>
</div>
<div class="w-full md:w-1/2 lg:w-1/3 flex flex-col mb-8 px-3">
<div class="overflow-hidden bg-white rounded-lg shadow hover:shadow-raised hover:translateY-2px transition">
<img class="w-full" src="https://source.unsplash.com/random/400x225" alt="Sunset in the mountains">
<div class="p-6 flex flex-col justify-between ">
<h3 class="font-medium text-gray-900 mb-4 leading-normal">Desktop Publishing Software like Aldus PageMaker
</h3>
<p class="inline-flex items-center">
<span class="text-gray-700 text-sm">Read More</span>
</p>
</div>
</div>
</div>
</div>
</section><section class="my-8 font-sans container max-w-xl m-auto flex flex-col md:flex-row sm:items-center">
<div class="w-full md:w-1/2 flex flex-col justify-center items-start px-6 py-0 md:py-8 md:px-8 lg:items-start">
<label for="tagline" class="uppercase tracking-wide text-gray-700 font-bold">various aspects</label>
<h1 class="mt-2 mb-4 font-medium">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
<p class="leading-normal mb-4 text-gray-700">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
</div>
<div class="w-full md:w-1/2 flex flex-row md:flex-col justify-between md:justify-center items-center p-2 md:p-8 items-center md:items-start">
<div class="flex items-center sm:border-r md:border-b md:border-r-0 p-4 w-1/2 md:w-auto">
<div class="w-14 h-14 rounded-full mr-4 bg-gray-300" alt="Avatar of Jonathan Reinink"></div>
<div class="">
<h2 class="text-black font-medium">Aliquam tincidunt mauris eu risus.</h2>
<p class="text-gray-700 leading-normal">Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
</div>
</div>
<div class="flex items-center p-4 w-1/2 md:w-auto">
<div class="w-14 h-14 rounded-full mr-4 bg-gray-300" alt="Avatar of Jonathan Reinink"></div>
<div class="">
<h2 class="text-black font-medium">Vestibulum auctor dapibus neque.</h2>
<p class="text-gray-700 leading-normal">Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
</div>
</div>
</div>
</section><footer class="font-sans bg-black text-white py-8 px-4">
<div class="mx-auto max-w-xl overflow-hidden flex justify-between items-center">
<ul class="text-sm text-gray-700 list-none p-0 flex items-center">
<li> <a href="/" class="block mr-4 w-32">
<img src="https://stitches.hyperyolo.com/images/logo-white.png" class="" alt="logo">
</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-500-light no-underline">Product</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-500-light no-underline">Company</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-500-light no-underline">FAQs</a></li>
<li><a href="#" class="inline-block py-2 px-3 text-gray-500 hover:text-gray-500-light no-underline">About Us</a></li>
</ul>
<p class="inline-block py-2 px-3 text-gray-700 text-xs"> ©2019 Hyperyolo. All rights reserved.</p>
</div>
</footer></body>
</html>