JSFiddle - React, Tailwind, and code Playground

by bjorn1990

HTML

<div id="slider">
  <h1>Hello, And welcome to our brand new website!</h1>
  <div id="inside"> 
    <h2>Slider :)</h2>
  </div> <!-- Closing inside -->
</div> <!-- Closing slider -->

<div id="container">
  <div id="box_wrapper"> 
    <div id="box1" class="box"> 
    <img src="http://tinyurl.com/j4omm5d" alt="picture1">
    <h2> Headline 1 </h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do   eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat. </p>
    <img src="http://tinyurl.com/zfl8bw4" alt="Read More...">
    </div> <!-- Closing child -->
    
    <div id="box2" class="box"> 
    <img src="http://tinyurl.com/zqucyd9" alt="picture2">
    <h2> Headline 2 </h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do   eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat. </p>
    <img src="http://tinyurl.com/zfl8bw4" alt="Read More...">
    </div> <!-- Closing child -->
    
    <div id="box3" class="box"> 
    <img src="http://tinyurl.com/jb6pk5n" alt="picture3">
    <h2> Headline 3 </h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do   eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat. </p>
    <img src="http://tinyurl.com/zfl8bw4" alt="Read More...">
    </div> <!-- Closing child -->
    
    <div id="box4" class="box"> 
    <img src="http://tinyurl.com/z6tsv8l" alt="picture4">
    <h2> Headline 4 </h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do   eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
   ...

CSS

body, html{
  margin: 0;
  padding: 0;
  background-color: #202121;
  color: #555;
}

#slider h1 {text-align: center;}

#slider{
  width: 100%;
  background-color: #ccc;
  padding-top: 20px;
  padding-bottom: 20px;
}

#inside{
  width: 1000px;
  min-height: 300px;
  border: 1px solid #555;
  margin: auto;
  text-align: center;
}

#container{
  width: 1000px;
  margin: 20px auto;
  border: 1px solid #555;
  text-align: center;
}

#box_wrapper{
  overflow: auto;
  display: inline-block;
}

.box{
  width: 180px;
  float: left;
  border: 1px solid #555;
  margin: 10px;
  padding: 20px;
  text-align: initial;
  color: #848484;
}

.box:hover{
  border: 1px solid #3c948b;
  color: #3c948b;
}

.box:hover > h2{
  color: #3c948b;
}

.box h2{
  color: #A4A4A4;
}

#content{
  clear: both;
  margin-top: 50px;
  color: #3c948b;
}