JSFiddle - React, Tailwind, and code Playground

by ruhul105

HTML

<title>Halyna Buriachenko |Web-designer</title>
  
 <body>
    <header>
      <a href="index.html" id="logo">
       <h1>Halyna Buriachenko</h1>
       <h2>Web-designer</h2>
      </a>
     <nav>
      <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
     </nav>
    </header>
   <div id="wrapper">
    <section>
       <ul id="gallery">
        <li>
         <a href="img/1.jpg">
           <img src="img/1.jpg" alt"">
            <p>Playing with colors.</p>
         </a>
        </li>
        <li>
         <a href="img/4.jpg">
           <img src="img/4.jpg" alt"">
            <p>Experimenting with shadows.</p>
         </a>
        </li>
        <li>
         <a href="img/3.jpg">
          <img src="img/3.jpg" alt"">
           <p>Performing content outwards.</p>
         </a>
        </li>
        <li>
         <a href="img/2.jpg">
          <img src="img/2.jpg" alt"">
           <p>Adjusting the exposure and using the Adobe Camera Raw filter.</p>
         </a>
        </li>
        <li>
         <a href="img/5.jpg">
          <img src="img/5.jpg" alt"">
           <p>Experimenting with simplicity.</p>
         </a>
        </li>
       </ul>
    </section>
    <footer>
      <a href="http://twitter.com/HeilySweet"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/galina.buryachenko"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2017 Halyna Buriachenko.</p>
    </footer>
     </div>
 </body>

CSS

a{
  text-decoration: none;
  color: #4d1a00;
}

body{
  background-color: #fff;
  color: #808080;
  font-family: 'Indie Flower', cursive;
}

#wrapper{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

img{
  max-width: 100%;
}
/**************************
HEADING
**************************/

#logo{
  text-align:center;
  margin:0;
}

header{
  background: #ffcc66;
  border-color: #ffd480;
}

h1, h2 {
  color: #fff;
}

h1{
  font-family: 'Merriweather', serif;
  margin: 15px, 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1.5em;
}

h2{
  font-family: 'Merriweather', serif;
  font-size: 1.3em;
  margin: 5px 0 0;
  font-weight:normal;
}


/**************************
Navigation
**************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

/***********************
Colors
***********************/

nav {
  background-color: #ffd480;
}

nav a, nav a:visited {
  color:#fff;
}

nav a.selected, nav a:hover{
  color: #4d1a00;
}

/**************************
Page:Portfolio
**************************/

#gallery {
  float:left;
  width:35%;
  margin:2.5%;
  padding: 10px 10px;
  background-color:#f5f5f5;
}
``
/**************************
FOOTER
**************************/

footer{
  text-align: center;
  font-size: 0.75em;
  padding-top:50px;
  color: #ccc;
  font-family: 'Merriweather', serif;
}