JSFiddle - React, Tailwind, and code Playground
by Hushme
CSS
body {
position: relative;
font: normal 15px/1.9em 'Merriweather', Georgia, serif;
margin: 0;
padding: 0
}
h1 {
font-style: normal;
font-size: 45px;
font-weight: normal;
vertical-align: baseline;
margin: 0;
padding: 0
}
a {
color: #c44736
}
a:hover {
color: #b84336
}
.clear {
color: inherit;
text-decoration: inherit
}
.clear:hover {
color: inherit
}
p {
margin-bottom: 2em
}
.site-name {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.26em;
font-weight: 700;
padding-top: 20px;
text-align: center;
font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif
}
@media all and (max-width: 480px) {
.site-name {
font-size: 10px
}
}
.site-name-blog {
padding-top: 30px
}
.site-name-link {
text-decoration: none;
transition: color 0.2s ease-in-out;
transform: translateZ(0);
position: relative
}
.site-name-link::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -2px;
left: 0;
background-color: #b84336;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1) 0s
}
.site-name-link:hover::before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
.site-name-link-white {
color: #fff
}
.site-name-link-white:hover {
color: #fff
}
.site-name-link-white::before {
background-color: #fff
}
.site-name-link-parent {
color: #333
}
.site-name-link-parent:hover {
color: #000
}
.site-name-link-parent::before {
background-color: #000
}
.site-name-link-parent-inverted {
color: #ccc
}
.site-name-link-parent-inverted:hover {
color: #fff
}
.site-name-link-parent-inverted::before {
background-color: #fff
}
.ampersand {
font-family: Baskerville, "EB Garamond", serif;
font-style: italic
}
.button-image-overlay {
position: absolute;
top: 0;
right: 20px;
...