JSFiddle - React, Tailwind, and code Playground

by Jordan Hawker

HTML

<script src="//use.typekit.net/rzv2mwh.js"></script>
<script>try{Typekit.load();}catch(e){}</script>


<div class="container">
  <h1>Recreate this using HTML &amp; CSS</h1>
  <img src="https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png" width="303" />
  
  <div class="wrapper">
    <h3 class="alert">$167 still needed for this project</h3>
    <div class="progress-bar">
    <div class="progress"></div>
    </div>
    <div class="funding">
    <p><strong>Only 3 days left</strong> to fund this project.</p>
    <p>
    Join the 42 other donors who have already supported this project. Every dollar helps.
    </p>
    <input type="text" placeholder="$50" />
    <button class="btn-primary">Give Now</button>
    </div>
    <button class="btn btn-secondary">
    Save for later
    </button>
    <button class="btn btn-secondary">
    Tell your friends
    </button>
  </div>
  
</div>

CSS

/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}

/* Fonts */
h1 {
  font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
  font-size: 2.5em;
  font-weight: bold;
}

.container {
  margin: 2em auto;
  max-width: 630px;
  text-align: center;
  font-size: 12px;
}

/* COLORS: 
  blue: #20A1D4;
  green: #1CBC2C;
  orange: #EF5F3C;
  black: #424242;
  grey: #777;
  light grey: #eaeaea;
*/

.wrapper {
  background-color:white;
  padding: 20px;
  width: 300px;
  margin: 20px auto;
  overflow: auto;
}
.alert {
  background-color:#424242;
  border-radius: 4px;
  padding: 12px;
  color: white;
  font-weight: 300;
  position:relative;
}

.alert:after{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    right: 20px;
    bottom: -5px;
    background-color: #424242;
    transform: rotate(45deg);
}

.funding {
  padding: 15px;
  border: 1px solid #eaeaea;
  text-align: left;
  color: #777;
}
p {
  margin-bottom: 1rem;
}
strong {
  color: #EF5F3C;
  font-weight: bold;
}
input, button {
    border-radius: 4px;
    padding: 0.7rem;
    font-weight: 500;
}
input {
     border: 1px solid #eaeaea;
}
button {
  border: 1px solid #eaeaea;
}
.btn-primary {
  background-color: #1cbc2c;
  border-color:#1cbc2c;
  color: white;
}
.btn-secondary {
    background-color: white;
    color: #777;
    padding: 8px 10px;
    width: 40%;
    float: left;
    margin: 10px 10px 10px 0;
}
.progress-bar{
    border: 1px solid #eaeaea;
    position: relative;
    height: 20px;
    margin-top: 10px;
    margin-bottom: -1px;s
}
.progress{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: red;
    width: 40%;
}