import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

interface DemoProps {
  /* you can define props type definitions here */
}

interface DemoState {
  /* you can define state type definitions here */
}

class App extends React.Component< DemoProps, DemoState > {
    action:any;
    action = (txt: any) => {
        mobiscroll.toast({
            message: txt + ' clicked'
        });
    }
    render() {
        return (
            <div>
                <mobiscroll.Card 
                    theme="ios"  
                    themeVariant="light"
                    lang=" "
                >
                    <mobiscroll.CardHeader>
                        <mobiscroll.CardTitle>Title</mobiscroll.CardTitle>
                        <mobiscroll.CardSubtitle>Subtitle</mobiscroll.CardSubtitle>
                    </mobiscroll.CardHeader>
                    <mobiscroll.CardContent>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </mobiscroll.CardContent>
                    <mobiscroll.CardFooter>This is a footer</mobiscroll.CardFooter>
                </mobiscroll.Card>
                
                <mobiscroll.Card 
                    theme="ios"  
                    themeVariant="light"
                    lang=" "
                >
                    <mobiscroll.CardContent>
                        <mobiscroll.CardTitle>Don't forget Jenifer's birthday</mobiscroll.CardTitle>
                    </mobiscroll.CardContent>
                    <mobiscroll.CardFooter>
                        <button onClick={() => { this.action('Call') }} className="mbsc-btn-flat" data-icon="phone">Call</button>
                        <button onClick={() => { this.action('Message') }} className="mbsc-btn-flat" data-icon="bubble">Message</button>                        
                    </mobiscroll.CardFooter>
                </mobiscroll.Card>
                
                <mobiscroll.Card 
                    theme="ios"  
                    themeVariant="light"
                    lang=" "
                >
                    <img src="https://img.mobiscroll.com/demos/card_5.png" />
                    <mobiscroll.CardContent>
                        Explore the azure depths with a stay at the Manta Resort's underwater room.
                    </mobiscroll.CardContent>
                    <mobiscroll.CardFooter>
                        <button className="mbsc-btn-flat">Share</button>
                        <button className="mbsc-btn-flat">Explore</button>                        
                    </mobiscroll.CardFooter>
                </mobiscroll.Card>
            </div>
        );
    }    
}

<div id="content"></div>