JSFiddle - React, Tailwind, and code Playground

by godsnake

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div class="bigwrapper">
    <div class="listwrapper">
        
        <div class="point">
            <div class="number">1</div>
            <div class="message">
                <div class="title">Upload your media and get discovered</div>
                <div class="info">Share, find, buy, or sell any type of content with the help of filters</div>
            </div>
        </div>
        
        <div class="point">
            <div class="number">2</div>
            <div class="message">
                <div class="title">Represent your city everytime you post</div>
                <div class="info">Raise local awareness with tags linked to content in your area</div>
            </div>
        </div>
    
    
         <div class="point">
            <div class="number">3</div>
            <div class="message">
                <div class="title">Make real connections with users nearby</div>
           <div class="info">Connect with neighbors, friends, fans, and rising stars in your city</div>
            </div>
        </div>
    
     <div class="point">
            <div class="number">4</div>
            <div class="message">
                <div class="title">Get started by typing your email address</div>
                     
                     <div class="guestlist">
                <form class="guestlist-form form-inline" action="signup" method="post">
           <input name="emailaddress" class="form-control input-lg" id="enterfield" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
           <input class="button btn-lg btn" title="Enter Email" name="submit" type="submit" autofocus="autofocus" value="Sign up!"> 
                </form>
              <div id="error-message"></div><span class="spam">Don't...

CSS

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bigwrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-around;
}


.point {
    padding-bottom: 10px;
    padding-top: 10px;
    white-space: nowrap; width:85%;
}

.message {
    display: inline-block;
}
.title {
    color: black;
    white-space: normal;
    margin-right: 60px; font-size:19px;
}
.info {
    color: #999;
    white-space: normal;
    margin-right: 60px; margin-top:5px;
}
 
.number {
      font: 36px Arial, sans-serif;
    width: 46px;
    height: 46px;vertical-align:bottom;
    margin-right: 10px; margin-top:5px;
    float: left;
    text-align: center;
}

.number {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
}




.listwrapper p {
  font-size: 13px !important; font-weight:bold; color:#333;
}


.listwrapper .form-control {min-width:100%!important; height:35px; font-size:13px; padding-top:0px; padding-bottom:0px; display:inline-block;}
.listwrapper .btn {min-width:100%!important; display:block; height:35px; font-size:12px; margin-top:10px;}

.listwrapper .btn {background:#333 !important; color:#fff !important; font-weight:bold;}

.listwrapper .btn:hover {background:#000 !important; color:#fff !important;}



.bigwrapper {display: flex; align-items: center; justify-content: center; height:100vh; height:100%; width: 100%; }

.listwrapper {background:#fff; vertical-align:middle!important;display:table-cell; }