JSFiddle - React, Tailwind, and code Playground

by MadhawaMB

HTML

<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css">

        <link rel="shortcut icon" type="image/x-icon" href="images/airbnb_icon.png" />
        <title>tombnb</title>
  
    
    <link rel="stylesheet" href="main2.css">

 
  <style>
 
  </style>
 
<body>
<div id="main-container">
<div id="inner-main-container">
        <div id="topbar">
                <div class="nav">
                        <div class="container">
       
                                <ul class="pull-left">
                                        <li><a href="#">Search</a></li>
                                        <li><a href="#">Locations</a></li>
                                </ul>
       
                                <ul class="pull-right">
                                        <li><a href="#">Sign Up</a></li>
                                        <li><a href="#">Log In</a></li>
                                        <li><a href="#">Help</a></li>
                                </ul>
                               
                        </div>
                </div>
    </div>
               
        <div class="alphabet-top">
       
                <li>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</li>
               
        </div>
 
    <div class="banner">
       
                <img src="images/airbnbnewyorkskyline.png" />
               
    </div>
       
        <div class="location-search-form">
                <form action="#">
                        <input type="text" name="where" placeholder="Where would you like to go?" class="where-box">
                        <input type="text" name="checkin" placeholder="Check In">
                        <input type="text" name="checkout" placeholder="Check Out">
                        <input type="text" name="guests" placeholder="1 Guest">
                    ...

CSS

#main-container {
        width: auto;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
 
#inner-main-container {
        width: 1400px;
}
 
.body {
        background-color: #BFCFFF; margin: 0;
    padding: 0;
}
 
#topbar {
        background-color: #FF6075;
        width: 100%;
        height: 50px;
}
 
.alphabet-top {
        font-family: 'Arial', sans-serif;
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        background-color: black;
        list-style-type: none;
}
 
.nav a {
        color: black;
        font-size: 12px;
        font-weight: bold;
        padding: 14px 10px;
        text-transform: uppercase;
}
 
.nav li {
        display: inline;
}
 
.banner {
        height: 450px;
        width: auto;
        background-repeat: no-repeat;
}
 
.banner img {
        height: 450px;
        width: 100%;
}
 
.location-search-form {
        height: 50px;
        width: 100%;
        background-color: #FF6075;
        text-align: center;
        margin-bottom: 50px;
}
 
.where-box {
        width: 300px;
}
 
.search-box {
        width: 100px;
        background-color: #ffffff;
        border: 2px solid black;
        font-family: Bodoni MT;
}
 
.location-search-form form {
        line-height: 35px;
        padding-top: 5px;
        font-family: Arial, san-serif;
}
 
.thumbnails {
        height: 300px;
        margin-bottom: 50px;
        text-align: center;
}
 
.thumbnail-london img {
        height: 300px;
        width: 300px;
        margin: 0px auto;
        position: relative;
        right: 350px;
}
 
.thumbnail-newyork img {
        height: 300px;
        width: 300px;
        margin: 0px auto;
        position: relative;
        bottom: 300px;
}
 
.thumbnail-sydney img {
        height: 300px;
        width: 300px;
        margin: 0px auto;
        position: relative;
        left: 350px;
        bottom: 600px;
}
 
.thumbnails-2 {
        height: 300px;
        margin-bottom: 50px;
        text-align: center;
}
...