JSFiddle - React, Tailwind, and code Playground

by docluv

HTML

<table>
    <tr class="flipInX">
        <td>Boston College</td>
        <td>Eagles</td>
    </tr>
    <tr>
        <td>Clemnson</td>
        <td>Tigers</td>
    </tr>
    <tr>
        <td>Duke</td>
        <td>Blue Devils</td>
    </tr>
    <tr>
        <td>Georgia Tech</td>
        <td>Yellow Jackets</td>
    </tr>
    <tr>
        <td>Florida State</td>
        <td>Seminoles</td>
    </tr>
    <tr>
        <td>Louisville</td>
        <td>Cardinals</td>
    </tr>
    <tr>
        <td>Miami</td>
        <td>Hurricanes</td>
    </tr>
    <tr>
        <td>UNC</td>
        <td>Smurfs</td>
    </tr>
    <tr>
        <td>NC State</td>
        <td>Wolfpack</td>
    </tr>
    <tr>
        <td>Pittsburg</td>
        <td>Panthers</td>
    </tr>
    <tr>
        <td>Syracuse</td>
        <td>Orange</td>
    </tr>
    <tr>
        <td>Virginia</td>
        <td>Cavaliers</td>
    </tr>
    <tr>
        <td>Virginia Tech</td>
        <td>Hokies</td>
    </tr>
    <tr>
        <td>Wake Forest</td>
        <td>Deamon Deacons</td>
    </tr>
</table>

CSS

body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */
	-webkit-backface-visibility: hidden;
}
.animated {
	-webkit-animation-duration: 1s;
	   -moz-animation-duration: 1s;
	     -o-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	-webkit-backface-visibility: visible...