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" />
  
  <!--Your HTML goes here-->
  <div class="donation-container">
    <div class="donation-header">
      <p>
        <strong>$167</strong> still needed for this project
      </p>
    </div>
    <div class="donation-progress-container">
      <div class="donation-progress-bar"></div>
    </div>
    <div class="donation-content">
      <p>
        <span class="text-danger">Only 3 days left</span> to fund this project.
      </p>
      <p>
      Join the 42 other donors who have already supported this project. Every dollar helps.
      </p>
      <form class="donation-form">
        <input>
        <button type="submit" class="button button-primary">
          Give Now
        </button>
      </form>
      <p>
        <a href="#" class="text-link">Why give $50</a>
      </p>
    </div>
    <div>
      <a href="#" class="button">Save for later</a>
      <a href="#" class="button">Tell your friends</a>
    </div>
  </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;
}

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

/* Your CSS goes here */
.text-danger {
  color: #Ef5F3C;
  font-weight: bold;
 }
 .text-link {
   font-style: italic;
   color: #20A1D4;
 }
 .button {
   -webkit-appearance: none;
   background-color: #eaeaea;
   border-radius: 2px;
   border: none;
   //padding: .5em .75em;
 }
 .button-primary {
   background-color: #1CBC2C;
 }
 
.donation-content {
  padding: 15px 20px;
  border: 1px solid #eaeaea;
  font-size: 12px;
  text-align: left;
}
  .donation-content p {
    margin: 1em 0;
  }
.donation-container {
  background-color: white;
  max-width: 305px;
  margin: 0 auto;
  padding: 15px 22px;
}
.donation-header {
  position: relative;
  background-color: #424242;
  padding: 1em;
  border-radius: 2px;
  font-size: 13px;
  color: white;
}
.donation-header:after {
  position: absolute;
  left: 85%;
  bottom: -5px;
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background-color: #424242;
  transform: rotate(45deg);
}
.donation-progress-container {
  margin-top: 10px;
  border: 1px solid #eaeaea;
}
.donation-progress-bar {
  background-color: #EF5F3C;
  height: 10px;
  width: 75%;
}
.donation-form:after {
  display: table;
  content: '';
  clear: both;
}
.donation-form input,
.donation-form button {
  float: left;
  width: 50%;
  padding: 1em 0;
}
.donation-form button {
  color: white;
}