JSFiddle - React, Tailwind, and code Playground
by Michel Penke
CSS
/*Zwischen-Text-Design*/
.cont {
max-width: 50%;
margin: 40px auto;
font-weight: bold;"
}
.hr-text {
line-height: 1em;
position: relative;
outline: 0;
border: 0;
color: black;
text-align: center;
height: 1.5em;
opacity: .5;
}
.hr-text:before {
content: '';
background: -webkit-linear-gradient(left, transparent, #818078, transparent);
background: linear-gradient(to right, transparent, #818078, transparent);
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 4px;
}
.hr-text:after {
content: attr(data-content);
position: relative;
display: inline-block;
color: black;
padding: 0 .5em;
line-height: 1.5em;
color: #1F1E1C;
background-color: #fcfcfa;
}
/*Link-Design*/
.link {
outline: none !important;
}
.anchors-wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
}
*, *:before, *:after {
box-sizing: border-box;
}
a.lines {
position: relative;
outline: none !important;
text-decoration: none;
font-weight: 500;
color: #75AFEF;
-webkit-transition: all ease-in 0.2s;
transition: all ease-in 0.2s;
}
a.lines:hover {
color: #FF8F8F;
}
a.lines:before, a.lines:after {
content: '';
position: absolute;
top: 80%;
background-color: #75AFEF;
opacity: 0.5;
width: 0;
height: 7px;
-webkit-transition: width 0.3s;
transition: width 0.3s;
}
a.lines:before {
left: 0;
}
a.lines:after {
right: 0;
}
a.lines:hover::before, a.lines:focus::before, a.lines:active::before, a.lines:hover::after, a.lines:focus::after, a.lines:active::after {
width: 50%;
}
/*Cover-Titel-Design*/
* {
margin:0;
...