JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>

<header>
    <div class="slider">
    <input type="radio" id="slide1" name="slide" checked>
    <input type="radio" id="slide2" name="slide">
    <input type="radio" id="slide3" name="slide">
    <input type="radio" id="slide4" name="slide">
    <ul>
        <li>
            <img src="http://www.dessko.com/assets/images/116/116_size_400x300_wallpaper-25331.jpg?1265653882">
        </li>
        <li>
            <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/09/Beautiful-Landscape-400x300.jpg">
        </li>
        <li>
            <img src="http://www.photofurl.com/wp-content/uploads/2010/04/blue-water-beach-wallpaper-400x300.jpg">
        </li>
        <li>
            <img src="http://www.widescreenwalls.com/wp-content/uploads/2011/10/Winter_Landscape-400x300.jpg">
        </li>
    </ul>
</div>
</header>

<section class="gallery">

    <figure>
        <a href="#">
            <img src="http://lorempixum.com/460/200" alt="">
            <figcaption>
                <h3>Title</h3>
                <p>This is where the information about the portfolio piece would go. This information would most likely span multiple lines.</p>
            </figcaption>
        </a>
    </figure>
    
    <figure>
        <a href="#">
            <img src="http://lorempixum.com/460/200/sports" alt="">
            <figcaption>
                <h3>Title</h3>
                <p>This is where the information about the portfolio piece would go. This information would most likely span multiple lines. This information would most likely span multiple lines.</p>
            </figcaption>
        </a>
    </figure>
    
    <figure>
        <a href="#">
            <img src="http://lorempixum.com/460/200/food" alt="">
            <figcaption>
                <h3>Title</h3>
                <p>This is where the information about the portfolio piece would go. This information would most likely span...

CSS

.slider {
    
    box-shadow: 0 4em 3em hsla(0,0%,0%,.4);
    height: 15em;
    left: 50%;
    margin: 0 -12em;
    position: absolute;
    text-align: center;
    top: 20px;
    width: 24em;
}
.slider input {
    position: relative;
    top: -1.5em;
}
.slider ul {
    height: 15em;
    position: relative;
    width: 24em;
    -webkit-transform: perspective(1000);
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 1s;
}
.slider li {
    left: 0;
  list-style: none;
    position: absolute;
    top: 0;
    -webkit-transform: translateZ(7.5em);
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
}
.slider li:nth-child(2) {
    -webkit-transform: rotateX(-90deg) translateY(-7.5em) translateZ(15em);
}
.slider li:nth-child(3) {
    -webkit-transform: rotateX(-180deg) translateY(-15em) translateZ(7.5em);
}
.slider li:nth-child(4) {
    -webkit-transform: rotateX(-270deg) translateY(-7.5em);
}
.slider img {
    height: 15em;
    width: 24em;
    vertical-align: top;
}
#slide2:checked ~ ul {
    -webkit-transform: perspective(1000) rotateX(90deg);
}
#slide3:checked ~ ul {
    -webkit-transform: perspective(1000) rotateX(180deg);
}
#slide4:checked ~ ul {
    -webkit-transform: perspective(1000) rotateX(270deg);
}


body {
    background-color: #f6f6f6;
    background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%,
                      hsla(0,0%,0%,.015) 50%, hsla(0,0%,0%,.015) 100%),
                      -webkit-radial-gradient(hsla(0,0%,0%,.05) 10%, transparent 15%),
                      -webkit-linear-gradient(hsla(0,0%,0%,.2) 0%, hsla(0,0%,100%,0) 100%);
    background-position: 50% 50%, 50% 50%, 50% 0%;
    background-repeat: repeat, repeat, no-repeat;
    background-size: 20px 20px, 10px 10px, 100% 25px;
    left: -10px;
    margin: 0 auto;
    padding: 0 50px;
    position: relative;
    width: 960px;
}

/* Header */

header {
    background-color: #c4453c;
    background-image:...