cashbac-component/src/component/tab/index.html

Front End depedencies for CB Merchant Webapp

<div id="tabTutorial" style="padding-top:20px;">
<div class="pushToBottom30">
    <h1>Tab pill</h1>
</div>

<div class="tab--pill--horizontal pill--small" style="margin-bottom: 30px;">
        <div class="tablinksfirst" onclick="openTab(event, 'tabcontentfirst','tablinksfirst','Ambience')" id="defaultPillSmall">Ambience</div>
        <div class="tablinksfirst" onclick="openTab(event, 'tabcontentfirst','tablinksfirst','Food')">Food</div>
        <div class="tablinksfirst" onclick="openTab(event, 'tabcontentfirst','tablinksfirst','Menu')">Menu</div>
</div>

<div class="tab--pill--horizontal pill--medium" style="margin-bottom: 30px;">
        <div class="tablinks" onclick="openTab(event, 'Ambience')" id="defaultPillMedium">Ambience</div>
        <div class="tablinks" onclick="openTab(event, 'Food')">Food</div>
        <div class="tablinks" onclick="openTab(event, 'Menu')">Menu</div>
</div>


<div class="tab--pill--horizontal pill--large" style="margin-bottom: 30px;">
        <div class="tablinks" onclick="openTab(event, 'Ambience')" id="defaultPillLarge">Ambience</div>
        <div class="tablinks" onclick="openTab(event, 'Food')">Food</div>
        <div class="tablinks" onclick="openTab(event, 'Menu')">Menu</div>
</div>

<div class="tab--pill--vertical pill--small" style="margin-bottom: 30px;">
        <div class="tablinks" onclick="openTab(event, 'Ambience')" id="defaultVerticalPillSmall">Ambience</div>
        <div class="tablinks" onclick="openTab(event, 'Food')">Food</div>
        <div class="tablinks" onclick="openTab(event, 'Menu')">Menu</div>
</div>


<div id="Ambience" class="tabcontentfirst">
    Ambience
</div>
<div id="Food" class="tabcontentfirst">
    Food
</div>
<div id="Menu" class="tabcontentfirst">
    Menu
</div>
<script>

</script>


<div class="pushToBottom30 pushToTop30">
    <h1>Tab</h1>
</div>


<div class="tab tab--small" style="margin-bottom: 30px;">
    <div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
    <div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
    <div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>

<div class="tab tab--medium" style="margin-bottom: 30px;">
    <div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
    <div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
    <div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>

<div class="tab tab--large" style="margin-bottom: 30px;">
    <div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
    <div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
    <div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>

<div class="tab tab--small tab--around" style="margin-bottom: 30px;">
    <div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
    <div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
    <div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>

<div class="tab tab--small tab--between" style="margin-bottom: 30px;">
    <div class="tablinks" onclick="openTab(event, 'Detail')" id="detail">Detail</div>
    <div class="tablinks" onclick="openTab(event, Terminal)">Terminal</div>
    <div class="tablinks" onclick="openTab(event, 'BeaconStore')">Beacon Store</div>
</div>

<div id="Detail" class="tabcontentsecond">
    Detail
</div>
<div id="Terminal" class="tabcontentsecond">
    Terminal
</div>
<div id="BeaconStore" class="tabcontentsecond">
    Beacon Store
</div>
</div>