JSFiddle - React, Tailwind, and code Playground

by dactivo

HTML

<div id="wrapper">

        <div id="header">

        <ul>
        <li><img src="https://cdn2.iconfinder.com/data/icons/pittogrammi/142/65-32.png">Home</li>
        <li>Login</li>
        <li>Profile</li>
        <li>Service</li>
        <li>Photos</li>

        </ul>

        </div><!---------------------------header------------------->




        <!---------------slideshow--------------------->

        <ul class="slides">
            <input type="radio" name="radio-btn" id="img-1" checked />
            <li class="slide-container">
              <div class="slide">
              <img src="http://freelargephotos.com/002475_l.jpg" />
              <p class="text">/p><p class="subtext"></p>
                </div>
            <div class="nav">
              <label for="img-6" class="prev">&#x2039;</label>
              <label for="img-2" class="next">&#x203a;</label>

            </div>

            </li>

            <input type="radio" name="radio-btn" id="img-2" />
            <li class="slide-container">
                <div class="slide">
                  <img src="http://freelargephotos.com/002475_l.jpg" />
                   <p class="text">Yankees Won</p><p class="subtext">The Detroit Tigers travel to the Coliseum to face the Oakland Athletics in Game 5 of the ALDS. These two teams will once again matchup to conclude the most exciting series in the 2013 postseason, thus far. Check out the live stream available online at 8 p.m. ET
        The Tigers have scored 14 runs in this series. The A's have scored 15 runs. This would explain why this series has been so tight. All games have been settled by three runs or less, two of which, were decided by one run.read more>>>>></p>
                </div>
            <div class="nav">
              <label for="img-1" class="prev">&#x2039;</label>
                    <label for="img-3" class="next">&#x203a;</label>
                </div>
            </li>

            <input type="radio" name="radio-btn" id="img-3"...

CSS

html{
        background:background: background: #4c4c4c; /* Old browsers */
        background: -moz-linear-gradient(top,  #4c4c4c 0%, #000000 0%, #000000 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(0%,#000000), color-stop(0%,#000000), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4c4c4c 0%,#000000 0%,#000000 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

        font-family: 'Oswald', sans-serif;

        }

        #wrapper{
        width:1024px;
        margin-right:auto;
        margin-left:auto;
        min-height:1000px;
        background:#888888;
        }

        #header{
        color:#000000;
        }

        #header li{
        display:inline;
        padding:10px;
        background:#FFF;
        border-radius:12px;
        }
        /*slideshow*/
         ...