Skip to content

Instantly share code, notes, and snippets.

@async0x42
Created August 18, 2020 02:31
Show Gist options
  • Select an option

  • Save async0x42/cd994433e9e4ae8d29cec9e6e604b2e9 to your computer and use it in GitHub Desktop.

Select an option

Save async0x42/cd994433e9e4ae8d29cec9e6e604b2e9 to your computer and use it in GitHub Desktop.
tailwind-ui-031-css
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 100;
font-display: swap;
src: url(../fonts/Inter-Thin.90ea9fcf.woff2) format("woff2"), url(../fonts/Inter-Thin.8fa98ab1.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 100;
font-display: swap;
src: url(../fonts/Inter-ThinItalic.4ccf7a2e.woff2) format("woff2"), url(../fonts/Inter-ThinItalic.b3fa328d.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(../fonts/Inter-ExtraLight.27320a33.woff2) format("woff2"), url(../fonts/Inter-ExtraLight.9d736a80.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(../fonts/Inter-ExtraLightItalic.ab308459.woff2) format("woff2"), url(../fonts/Inter-ExtraLightItalic.021a2bd4.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(../fonts/Inter-Light.9e82ccfe.woff2) format("woff2"), url(../fonts/Inter-Light.92f78b19.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(../fonts/Inter-LightItalic.df5deb60.woff2) format("woff2"), url(../fonts/Inter-LightItalic.27e9e59d.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/Inter-Regular.387eb98b.woff2) format("woff2"), url(../fonts/Inter-Regular.5027a81c.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(../fonts/Inter-Italic.117cabd2.woff2) format("woff2"), url(../fonts/Inter-Italic.5aab55bf.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/Inter-Medium.702e1866.woff2) format("woff2"), url(../fonts/Inter-Medium.a9c514e9.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(../fonts/Inter-MediumItalic.cc4b0d40.woff2) format("woff2"), url(../fonts/Inter-MediumItalic.17f33702.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/Inter-SemiBold.eece23e6.woff2) format("woff2"), url(../fonts/Inter-SemiBold.34e609c1.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(../fonts/Inter-SemiBoldItalic.9d02ad26.woff2) format("woff2"), url(../fonts/Inter-SemiBoldItalic.a48c9bbd.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/Inter-Bold.6fa3ebe2.woff2) format("woff2"), url(../fonts/Inter-Bold.1f50efc8.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(../fonts/Inter-BoldItalic.4b695e7e.woff2) format("woff2"), url(../fonts/Inter-BoldItalic.af0a3776.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(../fonts/Inter-ExtraBold.9a1e81b9.woff2) format("woff2"), url(../fonts/Inter-ExtraBold.032d75a4.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(../fonts/Inter-ExtraBoldItalic.78501533.woff2) format("woff2"), url(../fonts/Inter-ExtraBoldItalic.41269b15.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(../fonts/Inter-Black.754a007d.woff2) format("woff2"), url(../fonts/Inter-Black.9381240d.woff) format("woff");
}
@font-face {
font-family: Inter;
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(../fonts/Inter-BlackItalic.fcf54e48.woff2) format("woff2"), url(../fonts/Inter-BlackItalic.162a0cfe.woff) format("woff");
}
@font-face {
font-family: Inter var;
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: "Regular";
src: url(../fonts/Inter-roman.var.9776b736.woff2) format("woff2");
}
@font-face {
font-family: Inter var;
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: "Italic";
src: url(../fonts/Inter-italic.var.21a380fd.woff2) format("woff2");
}
@font-face {
font-family: Inter var experimental;
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url(../fonts/Inter.var.54c08b06.woff2) format("woff2");
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
-webkit-appearance: button;
}
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0;
}
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
[hidden],
template {
display: none;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
margin: 0;
}
button {
background-color: transparent;
background-image: none;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
fieldset,
ol,
ul {
margin: 0;
padding: 0;
}
ol,
ul {
list-style: none;
}
html {
font-family: Inter var, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
line-height: 1.5;
}
*,
:after,
:before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #d2d6dc;
}
hr {
border-top-width: 1px;
}
img {
border-style: solid;
}
textarea {
resize: vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #a0aec0;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #a0aec0;
}
input::placeholder,
textarea::placeholder {
color: #a0aec0;
}
[role="button"],
button {
cursor: pointer;
}
table {
border-collapse: collapse;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
button,
input,
optgroup,
select,
textarea {
padding: 0;
line-height: inherit;
color: inherit;
}
code,
kbd,
pre,
samp {
font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
.form-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #d2d6dc;
border-width: 1px;
border-radius: 0.375rem;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5;
}
.form-input::-moz-placeholder {
color: #9fa6b2;
opacity: 1;
}
.form-input:-ms-input-placeholder {
color: #9fa6b2;
opacity: 1;
}
.form-input::placeholder {
color: #9fa6b2;
opacity: 1;
}
.form-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
border-color: #a4cafe;
}
.form-textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #d2d6dc;
border-width: 1px;
border-radius: 0.375rem;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5;
}
.form-textarea::-moz-placeholder {
color: #9fa6b2;
opacity: 1;
}
.form-textarea:-ms-input-placeholder {
color: #9fa6b2;
opacity: 1;
}
.form-textarea::placeholder {
color: #9fa6b2;
opacity: 1;
}
.form-textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
border-color: #a4cafe;
}
.form-multiselect {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #d2d6dc;
border-width: 1px;
border-radius: 0.375rem;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5;
}
.form-multiselect:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
border-color: #a4cafe;
}
.form-select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
background-repeat: no-repeat;
background-color: #fff;
border-color: #d2d6dc;
border-width: 1px;
border-radius: 0.375rem;
padding-top: 0.5rem;
padding-right: 2.5rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5;
background-position: right 0.5rem center;
background-size: 1.5em 1.5em;
}
.form-select::-ms-expand {
color: #9fa6b2;
border: none;
}
@media not print {
.form-select::-ms-expand {
display: none;
}
}
@media print and (-ms-high-contrast: active), print and (-ms-high-contrast: none) {
.form-select {
padding-right: 0.75rem;
}
}
.form-select:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
border-color: #a4cafe;
}
.form-checkbox:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.414L7 8.586 5.707 7.293z'/%3E%3C/svg%3E");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: 50%;
background-repeat: no-repeat;
}
@media not print {
.form-checkbox::-ms-check {
border-width: 1px;
color: transparent;
background: inherit;
border-color: inherit;
border-radius: inherit;
}
}
.form-checkbox {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: #3f83f8;
background-color: #fff;
border-color: #d2d6dc;
border-width: 1px;
border-radius: 0.25rem;
}
.form-checkbox:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
border-color: #a4cafe;
}
.form-checkbox:checked:focus,
.form-radio:checked {
border-color: transparent;
}
.form-radio:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
background-color: currentColor;
background-size: 100% 100%;
background-position: 50%;
background-repeat: no-repeat;
}
@media not print {
.form-radio::-ms-check {
border-width: 1px;
color: transparent;
background: inherit;
border-color: inherit;
border-radius: inherit;
}
}
.form-radio {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
flex-shrink: 0;
border-radius: 100%;
height: 1rem;
width: 1rem;
color: #3f83f8;
background-color: #fff;
border-color: #d2d6dc;
border-width: 1px;
}
.form-radio:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
border-color: #a4cafe;
}
.form-radio:checked:focus {
border-color: transparent;
}
.bg-black {
--bg-opacity: 1;
background-color: #000;
background-color: rgba(0, 0, 0, var(--bg-opacity));
}
.bg-gray-500 {
--bg-opacity: 1;
background-color: #6b7280;
background-color: rgba(107, 114, 128, var(--bg-opacity));
}
.hover\:bg-gray-600:hover {
--bg-opacity: 1;
background-color: #4b5563;
background-color: rgba(75, 85, 99, var(--bg-opacity));
}
.flex {
display: flex;
}
.hidden {
display: none;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-grow {
flex-grow: 1;
}
.font-bold {
font-weight: 700;
}
.h-screen {
height: 100vh;
}
.text-sm {
font-size: 0.875rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.overflow-hidden {
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-white {
--text-opacity: 1;
color: #fff;
color: rgba(255, 255, 255, var(--text-opacity));
}
.text-black {
--text-opacity: 1;
color: #000;
color: rgba(0, 0, 0, var(--text-opacity));
}
.w-full {
width: 100%;
}
@-webkit-keyframes spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
@-webkit-keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%,
to {
transform: scale(2);
opacity: 0;
}
}
@keyframes ping {
0% {
transform: scale(1);
opacity: 1;
}
75%,
to {
transform: scale(2);
opacity: 0;
}
}
@-webkit-keyframes pulse {
0%,
to {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes pulse {
0%,
to {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@-webkit-keyframes bounce {
0%,
to {
transform: translateY(-25%);
-webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes bounce {
0%,
to {
transform: translateY(-25%);
-webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
-webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@media (min-width: 640px) {
.sm\:container {
width: 100%;
max-width: 640px;
}
@media (min-width: 768px) {
.sm\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.sm\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.sm\:container {
max-width: 1280px;
}
}
}
@media (min-width: 768px) {
.md\:container {
width: 100%;
}
@media (min-width: 640px) {
.md\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.md\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.md\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.md\:container {
max-width: 1280px;
}
}
}
@media (min-width: 1024px) {
.lg\:container {
width: 100%;
}
@media (min-width: 640px) {
.lg\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.lg\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.lg\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.lg\:container {
max-width: 1280px;
}
}
}
@media (min-width: 1280px) {
.xl\:container {
width: 100%;
}
@media (min-width: 640px) {
.xl\:container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.xl\:container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.xl\:container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.xl\:container {
max-width: 1280px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment