JSFiddle - React, Tailwind, and code Playground
by justinwinter
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.rugstudio.com/Shared/Themes/RugStudio2015/css/deputy.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<style id="compiled-css">
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
.cv {
border: 1px solid #000;
box-shadow: 0 1px #FFFFFF inset, 0 1px 3px rgba(34, 25, 25, 0.4);
}
.avatar {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #454545 50%, #454545 100%);
height: 300px;
text-align: center;
}
.avatar img {
padding: 5px;
border-radius: 50%;
margin-top: 25px;
background: #fff;
max-width: 250px;
}
.gray {
background: #454545;
}
.bio {
background: #454545;
color: #fff;
}
.bio hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.75), rgba(0, 0, 0, 0));
}
.about h3,
.contact h3 {
background-color: #4886a5;
box-shadow: 0...