JSFiddle - React, Tailwind, and code Playground
by batcave
CSS
h1 {
line-height: 1.2
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
*,
::after,
::before {
-webkit-box-sizing: inherit;
box-sizing: inherit
}
:root {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4
}
html {
line-height: 1.15
}
body {
margin: 0
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'
}
h1 {
font-size: 2em;
margin: .67em 0
}
button {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button {
text-transform: none
}
[type=button],
button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
button:-moz-focusring {
outline: ButtonText dotted 1px
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
padding-top: 4rem
}
.container {
max-width: 90rem;
padding: 0 1rem;
margin: 0 auto
}
@media (min-width:992px) {
body {
padding-top: 5rem
}
.container {
padding: 0 1.25rem
}
}
@media (min-width:1200px) {
.container {
padding: 0 2.5rem
}
}
h1,
h2 {
line-height: 1.2
}
ul {
padding: 0;
margin: 0
}
.card {
-webkit-box-shadow: 0 1px 2px 0 #ececec;
box-shadow: 0 1px 2px 0 #ececec;
background-color: #fff;
padding: 2rem;
text-align: center
}
.card--white {
color: #000
}
.section .content {
max-width: 50rem;
margin-right: auto;
margin-left: auto;
margin-bottom: 2.75rem
}
@media (min-width:992px) {
.card {
padding: 3rem 2rem
}
.section .content {
margin-bottom: 3.25rem
}
}
.content--center-text {
text-align: center
}
.section .content__title:first-child {
margin-top: 0
}
.section .content__text:last-child...