JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<ul class="slider">
			<li class="slide" id="slide1">
	
				<div class="text-container">
					<h1 id="t1" class="nanimate">テスト</h1>
					<h1 id="t2" class="nanimate">これは<span class="hcolor">動作テスト</span>です</h1>
				
					<h1 class="adjectives nanimate" data-time='300' data-direction="left" data-distance='20' data-fade='true' data-duration='1400'>IEは10以上で動作します</h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="top" data-distance='20' data-fade='true' data-duration='1400'><span class="hcolor">スマフォ用かなぁ</span></h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="bottom" data-distance='20' data-fade='true' data-duration='1400'>Flashっぽい</h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="left" data-distance='20' data-fade='true' data-duration='1400'><span class="hcolor">エフェクトを</span></h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="right" data-distance='20' data-fade='true' data-duration='1400'>作れます。</h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="bottom" data-distance='20' data-fade='true' data-duration='1400'>訴求性を</h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="left" data-distance='20' data-fade='true' data-duration='1400'>高める</h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="bottom" data-distance='20' data-fade='true' data-duration='1400'>一つの手として</h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="top" data-distance='20' data-fade='true' data-duration='1400'><span class="hcolor">考えてみるのも</span></h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="top" data-distance='20' data-fade='true' data-duration='1400'><span class="hcolor">いいかもしれません。</span></h1>
					<h1 class="adjectives nanimate" data-time='300' data-direction="left" data-distance='20'> <span class="hcolor">・・・多分。</span></h1>
					
				</div>
				
			</li>
		</ul>
	</div>

CSS

body{
		/*height: 10000px;*/
		padding: 0px;
		margin: 0px;
		font-family: "Lato";
		background-color: #cc6666;
    
	}
	.container{
		width: 100%;
		margin: auto;
		margin-top: 50px;
    font-size:12px !important;
	}
	ul.slider{
		list-style-type: none;
		position: relative;
		padding: 0px;
		margin: 0px;
		width: 100%;
		height: 250px;
		background-color: #fff;
		overflow: hidden;
		font-family: 'Bangers', cursive;
	}

	ul.slider li.slide{
		position: absolute;
		list-style-type: none;
		padding: 0px;
		margin: 0px;
		width: 800px;
		overflow: hidden;
		height: 250px;
	}

	ul.slider li.slider div.element{
		position: absolute;
	}

	
	h1, h2{
		font-family: "Lato",sans-serif;
		color: #333;
		padding: 0px;
		margin: 0px;
		font-weight: normal;
	}


	
	.text-container{
		position: absolute;
		top:45px;
		width: 800px;
	}

	.text-container h1{
		position: absolute;
		font-weight: normal;
		color:  #333;
	}

	.adjectives{
		position: absolute;
		top:135px;
		left: 210px;
		font-family: 'Bangers', cursive;
		width: 100%;
	}

	#t1{
		left:100px;
	}

	#t2{
	
		left:30px;
		top:80px;
	}

	#t3{
	
		top:140px;
		left:70px;
	}

	#t4{
	
		top:210px;
		left:180px;
	}

JavaScript

/*!
 * jQuery Transit - CSS3 transitions and transformations
 * (c) 2011-2012 Rico Sta. Cruz <[email protected]>
 * MIT Licensed.
 *
 * http://ricostacruz.com/jquery.transit
 * http://github.com/rstacruz/jquery.transit
 */

(function($) {
    $.transit = {
        version: "0.9.9",

        // Map of $.css() keys to values for 'transitionProperty'.
        // See https://developer.mozilla.org/en/CSS/CSS_transitions#Properties_that_can_be_animated
        propertyMap: {
            marginLeft: 'margin',
            marginRight: 'margin',
            marginBottom: 'margin',
            marginTop: 'margin',
            paddingLeft: 'padding',
            paddingRight: 'padding',
            paddingBottom: 'padding',
            paddingTop: 'padding'
        },

        // Will simply transition "instantly" if false
        enabled: true,

        // Set this to false if you don't want to use the transition end property.
        useTransitionEnd: false
    };

    var div = document.createElement('div');
    var support = {};

    // Helper function to get the proper vendor property name.
    // (`transition` => `WebkitTransition`)
    function getVendorPropertyName(prop) {
        // Handle unprefixed versions (FF16+, for example)
        if (prop in div.style) return prop;

        var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
        var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);

        if (prop in div.style) {
            return prop;
        }

        for (var i = 0; i < prefixes.length; ++i) {
            var vendorProp = prefixes[i] + prop_;
            if (vendorProp in div.style) {
                return vendorProp;
            }
        }
    }

    // Helper function to check if transform3D is supported.
    // Should return true for Webkits and Firefox 10+.
    function checkTransform3dSupport() {
        div.style[support.transform] = '';
        div.style[support.transform] = 'rotateY(90deg)';
        return div.style[support.transform]...