JSFiddle - React, Tailwind, and code Playground

by dima_k

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<div data-role="page">
    <div data-role="header">
        <h1>Transitions</h1>
    </div>
    <div data-role="content">
        <h3 class="centered-content">Transitions</h3>
        <!-- data-direction="reverse" -->
        <div class="transition-container">
            <div class="transition-title">Fade</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="fade">Show</a>
            <br />
            <div class="transition-title">Pop</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="pop">Show</a>
            <br />
            <div class="transition-title">Flip</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="flip">Show</a>
            <br />
            <div class="transition-title">Turn</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="turn">Show</a>
            <br />
            <div class="transition-title">Flow</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="flow">Show</a>
            <br />
            <div class="transition-title">Slidefade</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="slidefade">Show</a>
            <br />
            <div class="transition-title">Slide</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="slide">Show</a>
            <br />
            <div class="transition-title">Slideup</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="slideup">Show</a>
            <br />
            <div class="transition-title">Slidedown</div>
            <a href="#page1" data-role="button" data-inline="true" data-transition="slidedown">Show</a>
        ...

CSS

.centered-content {
    text-align: center;
}

.transition-container {
    text-align: center;
}

.transition-title {
    width: 20%;
    display: inline-block;
    text-align: left;
    font-weight: bold;
    font-size: 20px;
}