JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<link href='http://fonts.googleapis.com/css?family=Mr+Bedfort|Eater' rel='stylesheet' type='text/css'>        
        <ul>
            <li>
                <a href="#">
                    <h2>Title #1</h2>
                    <p>Text Content #1</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>Title #2</h2>
                    <p>Text Content #2</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>Title #3</h2>
                    <p>Text Content #3</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>Title #4</h2>
                    <p>Text Content #4</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>Title #5</h2>
                    <p>Text Content #5</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>Title #6</h2>
                    <p>Text Content #6</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>Title #7</h2>
                    <p>Text Content #7</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <h2>Title #8</h2>
                    <p>Text Content #8</p>
                </a>
            </li>
        </ul>

CSS

* {
            margin:0;
            padding:0
        }
        body {
            font-family:arial,sans-serif;
            font-size:100%;
            margin:3em;
            background-color:#666;
            color: #fff;
        }
        h2,p {
            font-size: 100%;
            font-weight:normal;
        }
        ul,li {
            list-style:none;
        }
        ul {
            padding:3em;
            font-size:0;
        }
        ul li {
            display: inline-block;
            *display:inline;
            zoom:1;
            margin:1em 1em 3em;
            font-size:16px;
        }
        ul a {
            -moz-box-shadow: 5px 5px 7px rgba(33,33,33,0.7);
            -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,0.7);
            box-shadow: 5px 5px 7px rgba(33,33,33,0.7);
            position:relative;
            display:inline-block;
            font-size:100%;
            text-decoration:
            none;color:#000;
            background-color:#ffc;
            height:10em;
            width:10em;
            padding:1em;
            -webkit-transform:rotate(-6deg);
            -o-transform:rotate(-6deg);
            -moz-transform:rotate(-6deg);
            -ms-transform:rotate(-6deg);
            transform:rotate(-6deg);
            -moz-transition: -moz-transform .15s linear;
            -webkit-transition: -webkit-transform .15s linear;
            -o-transition: -o-transform .15s linear;
            -ms-transition: -ms-transform .15s linear;
            transition: transform .15s linear;
        }
        ul a:before {
            content:'';
            position:absolute;
            top:-20px; 
            left: 20%;
            width: 110px;
            height: 40px;
            background-color:rgba(255, 255, 204,0.5);            
            border-left: 1px dashed rgba(0, 0, 0, 0.1);
            border-right: 1px dashed rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
          ...