JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style>
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:800);
/* MOBILE CUSTOMIZATIONS */
@media screen and (max-width: 767px) {
.snip1214 .plan {
width: 90%;
margin: 0 auto;
background-color: blue;
}
}
@media screen and (min-width: 768px) {
.snip1214 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
html {
height: 100%;
}
body {
background-color: #212121;
display: flex;
justify-content: center;
align-items: center;
flex-flow: wrap;
margin: 0;
height: 100%;
}
.snip1214 {
font-family: 'Raleway', Arial, sans-serif;
color: #000000;
text-align: center;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 40px 10px;
}
.snip1214 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1214 header {
position: relative;
}
.snip1214 .plan-title {
position: relative;
top: 0;
font-weight: 800;
padding: 5px 15px;
margin: 0 auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
display: inline-block;
background-color: #222f3d;
color: #ffffff;
text-transform: uppercase;
}
.snip1214 .plan-cost {
padding: 0px 10px 20px;
}
.snip1214 .plan-price {
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 800;
font-size: 2.4em;
color: #34495e;
}
.snip1214 .plan-type {
opacity: 0.6;
}
.snip1214 .plan-features {
padding: 0;
margin: 0;
text-align: center;
list-style: outside none none;
font-size: 0.8em;
}
.snip1214 .plan-features li {
border-top: 1px solid #d2d7e2;
padding: 10px 5%;
}
.snip1214 .plan-features li:nth-child(even) {
background: rgba(0, 0, 0, 0.08);
}
.snip1214 .plan-features i {
margin-right: 8px;
opacity: 0.4;
}
.snip1214...