JSFiddle - React, Tailwind, and code Playground
CSS
*{
padding: 0;
margin: 0;
}
body{
font-family: Tahoma, Arial, sans-serif;
color: #fff;
background: #1C1B15;
}
a{
text-decoration: none;
color: #fff;
}
header{
background: #222222;
text-align: center;
}
h2{
font-size: 12px;
color: #00AFFF;
cursor: pointer;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
img{
max-width: 100%;
}
section{
text-align: right;
background: url(img/background.jpg) no-repeat center / cover;
height: 600px;
}
h3{
text-align: left;
margin-top: -498px;
font-size: 62px;
margin-left: 50px;
text-transform: uppercase;
}
.price{
color: #d1b482;
font: 28px Tahoma,arial,sans-serif;
letter-spacing: 1.2px;
margin-left: 50px;
}
button{
padding: 0 46px;
white-space: nowrap;
display: inline-block;
background-color: #f26402;
border: none;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font: 17px "WarheliosBold_Web","Arial Narrow",Tahoma,arial,sans-serif;
height: 60px;
line-height: 60px;
padding: 0 26px;
position: relative;
text-align: center;
text-transform: uppercase;
transition: color .2s,width .2s,font-size .2s,background-color .2s;
vertical-align: middle;
margin-left: 50px;
margin-top: 18px;
outline: none;
}
button:hover {
background-color: #f78c03;
}
button:active {
animation-name: bounce;
animation-duration: .2s;
}
@keyframes bounce {
0% { transform: scale(1); }
50% { transform: scale(.98); }
100% { transform: scale(1); }
}
h4{
text-align: left;
font-size: 40px;
text-transform: uppercase;
margin-top: 300px;
}
.line{
border-color: rgba(255,255,255,0.3);
border-width: 0 0 1px;
padding-bottom: 11px;
margin-bottom: 38px;
}
ul li{
text-transform: uppercase;
font-size: 23px;
}
.bonus{
display: inline-block;
background: #a61c00;
font-size: 12px;
line-height: 16px;
height: 16px;
letter-spacing: 1.5px;
margin-right: 2px;
padding: 0 4px 1px;
position: relative;
text-shadow:...