JSFiddle - React, Tailwind, and code Playground
by dingen2010
HTML
<body>
<div class="title">
<div id="val">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum ullamcorper magna ut vulputate. Mauris hendrerit neque et risus feugiat aliquet. Donec non ullamcorper justo. In efficitur mauris sagittis neque vulputate sodales. Fusce
placerat tortor sapien, in posuere ante egestas quis. Ut lobortis semper volutpat. Phasellus enim enim, facilisis non elit in, ultricies efficitur purus. Ut sit amet posuere lorem, vitae aliquet enim. Suspendisse commodo mollis dictum. Nulla facilisi.
Aenean vitae ante sem. Sed vel lectus tincidunt, interdum erat eu, aliquet leo. Nam at iaculis lectus. Vestibulum dui mi, laoreet id bibendum in, volutpat sit amet eros. Donec nec mattis nisi, id laoreet enim. Cras tristique massa et iaculis consectetur.
Vivamus gravida consectetur vestibulum. Ut eget orci neque. Aenean eget finibus dui. Vestibulum ac fringilla sem. Morbi venenatis rhoncus dictum. Nulla ac suscipit tortor. Nulla sit amet metus odio. Pellentesque imperdiet laoreet orci, vitae vulputate
nulla consequat a. Pellentesque tempor lorem sit amet neque aliquam molestie. Ut ultrices vitae felis a blandit. Suspendisse non egestas justo, eget sagittis dolor. Morbi ac blandit ex. Aliquam porta sem quis justo interdum, a venenatis massa blandit.
Suspendisse feugiat vestibulum eros, vel aliquet nisl porttitor quis. Duis eu dignissim ante. Mauris urna nisl, scelerisque nec eleifend ut, malesuada non urna. Cras a ultricies magna. Donec diam justo, ornare at mauris ac, tempor pretium urna.
Aenean id consectetur est. Morbi eu libero ultricies, accumsan erat at, efficitur ipsum. Morbi magna risus, rhoncus ac velit mollis, dapibus finibus tortor. Integer lectus odio, vulputate non nibh at, gravida rhoncus lectus. Cras posuere odio luctus
facilisis varius. Mauris accumsan nunc nisl, vel blandit quam gravida in. Maecenas ac diam eget ante fermentum pretium in ut ex. Phasellus et enim non...
CSS
@import url(https://fonts.googleapis.com/css?family=Montserrat);
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
html {
position: relative;
background: #FF4E50;
background: -webkit-linear-gradient(right, #FF4E50, #F9D423);
background: linear-gradient(to left, #FF4E50, #F9D423);
-webkit-transition: all .5s ease;
transition: all .5s ease;
font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.title {
position: absolute;
top: 40%;
left: 0;
right: 0;
text-align:center;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.title a {
color: #fff;
text-transform: none;
text-decoration: none;
font-size: 50px;
letter-spacing: 0;
}