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-->
  <article class="project">
    <aside class="project__aside">$167 still needed for this project</aside>
    <progress class="project__progress" value="7" max="10">
      </progress>
    <section class="project__container">
      
      <p class="project__time">
      <span class="warning">Only 3 days lef</span> to fund this project.
      </p>
      <p class="project__desc">
      Join the <span class="bold">42</span> other donors who have already supported this project. Every dollar helps.
      </p>
      <form method="POST">
      <div class="form--inline">
        <label for="amount" class="sr-only">Amount</label>
        <input type="text" id="amount" class="form__input">
        <button type="submit" class="success">
        Give Now
        </button>
      </div>
      
      </form>
      <div class="project__info">
        <a href="#" class="info">
          Why give $50?
        </a>
      </div>
    </section>
    
    <button type="button">
    Save for later
    </button>
    
    <button type="button">
    Tell your friends
    </button>
    
  </article>
  
  
</div>

SCSS

/* 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 */
.project {
  display:block;
  background-color: #fff;
  max-width: 300px;
  margin: 0 auto;
  padding: 15px;
}

.project__aside {
  background-color: #777;
  color: #fff;
  border-radius: 3px 3px;
  padding: 5px 10px;
  
  &:before {
    content: '';
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
  }
}

.project__container {
  border: 1px solid #eaeaea;
  margin: 0 0 10px 0;
  padding: 10px;
  font-size: 14px;
}

.project__progress {
  background-color: #EF5F3C;
  width: 100%;
}

.bold {
  color: #777;
}

.warning {
  color: #EF5F3C;
}

.sr-only {
  position: absolute: 
  left: -9999px;
}

.project__time,
.project__desc {
  margin: 10px auto;
}

.form__input {
  border: 1px solid #333;
  border-radius: 3px 3px;
}