JSFiddle - React, Tailwind, and code Playground
by james0n
HTML
<html dir="ltr" lang="en">
<body style="background-color:#aac;">
<ion-content padding style="background-color:#333">
<h2>Ionic playground</h2>
<p>
This is just for playing around with Ionic.
</p>
<ion-list>
<ion-item>
<ion-icon name="star" item-start></ion-icon>
text
</ion-item>
<ion-item>
<ion-icon name="star" slot="start"></ion-icon>
<ion-label>
Icon Start
</ion-label>
</ion-item>
<ion-item>
<ion-icon>
</ion-icon>
text
</ion-item>
<ion-item>
<ion-icon>
</ion-icon>
text
</ion-item>
</ion-list>
<div style="background-color:#acd">
<div style="padding:1em;background-color:#fff;">
<div>
<ion-label style="display: inline-block;padding-right:1em">
<ion-icon name="star"></ion-icon>
Running
</ion-label>
<ion-label style="display: inline-block;padding-right:1em">
<ion-icon name="star"></ion-icon>
Ready
</ion-label>
<ion-label style="display: inline-block;padding-right:1em">
<ion-icon name="star"></ion-icon>
Fault
</ion-label>
<ion-label style="display: inline-block;">
<ion-icon name="star"></ion-icon>
Fault
</ion-label>
</div>
<ion-button color="success">
<ion-icon style="padding-right:0.6em" name="checkmark-circle-outline"></ion-icon>
Start
</ion-button>
<ion-button color="danger">
<ion-icon style="padding-right:0.6em" name="checkmark-circle-outline"></ion-icon>
Stop
</ion-button>
<ion-button...