JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/ext-touch.css">
<script src="http://dev.sencha.com/deploy/touch/ext-touch.js"></script>

CSS

body {
    background-color: #376daa;
}
.card {
    text-align: center;
    color: #204167;
    text-shadow: #3F80CA 0 1px 0;
    font-size: 72px;
    padding: 80px 40px;
}

.x-phone .card {
    padding: 15px;
    font-size: 36px;
}

.card p {
    font-size: 24px;
    line-height: 30px;
}

.x-phone .card p {
    font-size: 16px;
    line-height: 18px;
}

JavaScript

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        // Create a Carousel of Items
        
        var carousel1 = new Ext.Carousel({
            direction: 'vertical',
            defaults: {
                cls: 'card'
            },
            items: [{
                html: '<h1>Carousel</h1><p>Navigate the carousel on this page by swiping top/bottom or clicking on one side of the circle indicators below.</p>'
            },
            {
                title: 'Tab 2',
                html: '2'
            },
            {
                title: 'Tab 3',
                html: '3'
            }]
        });
        
        var kls = function() {
            var cardItems = [];
            
            this.basicCard = new Ext.Component({
                scroll: 'vertical',
                html: 'Hello Carousel 1!'
            });
            
            this.basicCard2 = new Ext.Component({
                scroll: 'vertical',
                html: 'Hello Carousel 2!'
            });
            
            cardItems.push(this.basicCard);
            
            cardItems.push(this.basicCard2);
            
            this.carousel = new Ext.Carousel({
                items: cardItems
            });
            
            this.items = [this.carousel];
        };
        var car = new kls();
        var carousel2 = car.carousel;
        
        var panel = new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                flex: 1
            },
            hidden: true,
            items: [carousel1, carousel2]
        });
        setTimeout(function() {
            panel.show();
        }, 1000);
    }
});