JSFiddle - React, Tailwind, and code Playground

Button | Headings - Deloitte

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1>Malesuada Aenean Mollis</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<h3>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<br>
<div class="reverse-btn button">Find out more</div>
</div>

CSS

/* Do not copy */
@import: url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
/* Do not copy */
html {
  font-size: 100%;
}

body {
  /* Do not copy */
  font-size: .625em;
  /* Do not copy */
  font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
  background: #e8eae9;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.3;
  margin: 0 0 .5em 0;
  padding-bottom: .2em;
  color: #000;
}

h1 {
  font-weight: 400;
  font-size: 3em;
}

h2 {
  font-size: 2em;
  font-weight: normal;
}

h3 {
  margin: 1em 0;
  color: #97999b;
  font-size: 1.8em;
  line-height: 1.22em;
  margin: .6222em 0 0 0;
  font-weight: normal;
  padding: 0;
}

.reverse-btn {
  font-size: 16px;
  display: table-cell;
  padding: 0;
  vertical-align: middle;
  min-height: 50px;
  line-height: 1.8;
  padding: .6em;
  width: 100%;
  background: transparent;
  border: 2px solid #00a3e0;
  color: #00a3e0;
}

.reverse-btn:hover {
    background: #4cbee9;
    color: #fff!important;
}

.button {
  padding: .4em;
  display: block;
  -webkit-border-radius: 2px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 2px;
  -moz-background-clip: padding;
  border-radius: 2px;
  background-clip: padding-box;
  box-sizing: border-box;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}


/* DO NOT COPY THIS */

</style> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <style>