JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="section-1">
    <div class="is-size-3 is-bold">Travlr.</div>
    <div class="content">
      <div class="header is-size-3 is-bold">
        Sign up for
        <br>
        <span class="text-blue">EXCLUSIVE</span> ACCESS
      </div>
      <div class="form">
        <div class="form-control">
          <label for="username">username</label>
          <input type="text" placeholder="johndoe" name="username">
        </div>
        <div class="form-control">
          <label for="email">email</label>
          <input type="email" placeholder="[email protected]" name="email">
        </div>
        <div class="form-control">
          <label for="password">password</label>
          <input type="password" placeholder="&bull; &bull; &bull; &bull; &bull; &bull;" name="password">
        </div>
        <button class="button block is-blue">Sign Up</button>
        <div class="or"><span class="text">OR</span></div>
        <button class="button block">
            <img src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-128.png" class="img-icon">
          Sign in with Google
        </button>
        <button class="button is-facebook block gutter-top-20">
          <i class="fa fa-facebook icon"></i>
          Sign in with Facebook
        </button>
      </div>
      
      <div class="text-center is-size-6 text-grey gutter-top-30">
        Already have an account?
        <a href="#">Login</a>
      </div>
    </div>
  </div>

  <div class="section-2"></div>
  <div class="section-3">
    <div class="burger">
      <i class="fa fa-ellipsis-v"></i>
      <i class="fa fa-ellipsis-v"></i>
      <i class="fa fa-ellipsis-v"></i>
    </div>
    <div class="vertical-text">Yosemite Valley</div>
    <div class="line"></div>
    <div class="contact">
      <a href="#" class="icon"><i class="fa...

SCSS

/* colors */
$blue: #7a68f3;

$break-tablet: 768px;
$break-desktop: 1024px;

@mixin desktop {
  @media (min-width: #{$break-desktop}) {
    @content;
  }
}
@mixin tablet {
  @media (min-width: #{$break-tablet}) and (max-width: #{$break-desktop - 1px}) {
    @content;
  }
}
@mixin phone {
  @media (max-width: #{$break-tablet - 1px}) {
    @content;
  }
}
* {
  box-sizing: border-box;
}
body {
  background-color: #dde9ff;
  font-family: 'Arial';
  min-height: 100vh;
  font-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

strong {
  font-weight: bold;
}

a {
  color: dodgerblue;
  text-decoration: none;
  &:hover {
    color: darken(dodgerblue, 10%);
  }
}

.container {
  flex: 1 0 0;
  background-color: #fff;
  margin: 20px;
  max-width: 1024px;
  min-height: 300px;
  box-shadow: 0 0 1rem #ccc;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  >.section-1 {
    width: 37%;
    padding: 2em;
    >.content {
      
      margin: 1.5rem 1rem;
      >.header {
        text-transform: uppercase;
      }
      >.form {
        margin-top: 30px;
      }
    }
  }
  >.section-2 {
    width: 57%;
    background-image: url(https://hdwallsource.com/img/2014/5/winter-fantasy-scenery-18713-19192-hd-wallpapers.jpg);
    background-size: cover;
  }
  >.section-3 {
    width: 6%;
    display: flex;
    align-items: center;
    flex-direction: column;
    
    >.burger { margin-top: 2rem; }
    >.vertical-text {
      margin-top: 2.5rem;
      text-transform: uppercase;
      font-weight: bold;
      writing-mode: vertical-rl;
      letter-spacing: .1rem;
      font-size: .9rem;
    }
    >.line {
      margin-top: 2.5rem;
      height: 20%;
      border-left: 2px solid lightgrey;
    }
    >.contact {
      margin-top: 1.2rem;
      >.icon {
        display: block;
        color: black;
        margin-top: 1.3rem;
      }
    }
  }
}

/* @include tablet {
  .container {
    >.section-1 {
      width: 37.5%;
    }
 ...