-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (118 loc) · 6.35 KB
/
index.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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Tailwind Breakpoints</title>
<meta name="description" content="Always know breakpoint you're working in when using Tailwind CSS">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/output.css">
<link href="https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,200;0,600;1,900&display=swap"
rel="stylesheet">
<script async defer data-domain="tailwindbreakpoints.com" src="https://plausible.io/js/plausible.js"></script>
<script>window.plausible = window.plausible || function () {
(window.plausible.q = window.plausible.q || []).push(arguments)
}</script>
<style>.bmc-button img {
height: 34px !important;
width: 35px !important;
margin-bottom: 1px !important;
box-shadow: none !important;
border: none !important;
vertical-align: middle !important;
}
.bmc-button {
padding: 7px 15px 7px 10px !important;
line-height: 35px !important;
height: 51px !important;
text-decoration: none !important;
display: inline-flex !important;
color: #ffffff !important;
background-color: #000000 !important;
border-radius: 5px !important;
border: 1px solid transparent !important;
padding: 7px 15px 7px 10px !important;
font-size: 28px !important;
letter-spacing: 0.6px !important;
box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5) !important;
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
margin: 0 auto !important;
font-family: 'Cookie', cursive !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.bmc-button:hover, .bmc-button:active, .bmc-button:focus {
-webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
text-decoration: none !important;
box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5) !important;
opacity: 0.85 !important;
color: #ffffff !important;
}</style>
</head>
<body>
<script src="https://awesomecdn.netlify.app/tw.js"></script>
<div class="hero py-12 bg-gradient">
<div class="container px-6 mx-auto py-5 text-center font-bold text-white">
<h1 class="c-h1">Tailwind Breakpoints</h1>
<p class="text-xl font-hairline">A tiny little thing that helps you keep track of your Tailwind breakpoints.</p>
<div class="mt-10">
<a href="https://github.com/GigaMick/bootstrap-tailwind-breakpoints" target="_blank"
class="border border-gray-200 text-gray-200 bg-gray-400 bg-opacity-25 rounded p-4 mt-6">View on
GitHub</a>
</div>
<div class="mt-12">
<p class="text-center text-white mb-0"><a class="text-white" href="https://bootstrapbreakpoints.com/?ref=bsbp">Prefer Bootstrap?</a></p>
</div>
</div>
</div>
<div class="container px-6 mx-auto">
<h3 class="c-h3 text-center font-black mt-6">Always know your breaking point</h3>
<h5 class="c-h6 mt-2 text-center">Supremely simple & really quite useful. Drag your browser in and out to see it
working.</h5>
<p class="text-center mt-4 text-xl">Just copy the markup below into the body of any pages you’re working on and
you’ll
always know what
break point you’re in.</p>
</div>
<div class="flex justify-center py-4" onclick="plausible('html_copy')">
<div class="container mx-auto flex justify-center flex-col">
<pre class="max-w-full overflow-scroll text-gray-800 px-5 py-4 inline-block mx-auto bg-gray-200 rounded border-solid border-gray-400 border text-xs"><code><div class="fixed z-50 text-xs font-bold text-black p-2">
<span class="sm:hidden rounded px-1 bg-yellow-400 p-1">XS</span>
<span class="hidden sm:inline-block md:hidden rounded px-1 bg-yellow-400">SM</span>
<span class="hidden sm:hidden md:inline-block lg:hidden rounded px-1 bg-yellow-400">MD</span>
<span class="hidden lg:inline-block xl:hidden rounded px-1 bg-yellow-400">LG</span>
<span class="hidden xl:inline-block rounded px-1 bg-yellow-400">XL</span>
</div></code></pre>
</div>
</div>
<div class="flex justify-center mt-6" onclick="plausible('html_copy')">
<div class="container mx-auto flex justify-center flex-col">
<p class="text-center mb-2">Or paste the CDN link into the <strong><body></strong> of your pages</p>
<pre class="max-w-full overflow-scroll text-gray-800 px-5 py-4 inline-block mx-auto bg-gray-200 rounded border-solid border-gray-400 border text-xs"><code><script src="https://awesomecdn.netlify.app/tw.js"></script></code></pre></div>
</div>
<div class="flex flex-col justify-center align-middle text-center py-0">
<p class="mb-2 mt-10 pt-0">If you found this helpful, I appreciate coffee 🤓</p>
<link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet">
<a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/ProductGuy"><img
src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span
style="margin-left:5px;font-size:28px !important;">Buy me a coffee</span></a>
</div>
<!-- Buttons start here. Copy this ul to your document. -->
<p class="text-center text-xs mb-0 mt-5">Please Share 🤘</p>
<ul class="rrssb-buttons flex justify-center mt-0 space-x-3 pb-10">
<li class="rrssb-facebook shadow-2xl text-center">
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://tailwindbreakpoints.com" class="popup">
<span class="rrssb-icon"><span class="rrssb-text"> facebook</span></a>
</li>
<li class="rrssb-twitter shadow-2xl">
<!-- Replace href with your Meta and URL information -->
<a href="https://twitter.com/intent/tweet?text=https://tailwindbreakpoints.com/"
class="popup">
<span class="rrssb-icon"><span class="rrssb-text">twitter</span>
</a>
</li>
</ul>
<!-- Buttons end here -->
</body>
</html>