Midone - Tailwind Admin Dashboard Template

Typography

Heading

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6 
            <div>
    <h1 class="text-4xl font-medium leading-none">h1. Heading 1</h1>
    <h2 class="mt-3 text-3xl font-medium leading-none">
        h2. Heading 2
    </h2>
    <h3 class="mt-3 text-2xl font-medium leading-none">
        h3. Heading 3
    </h3>
    <h4 class="mt-3 text-xl font-medium leading-none">
        h4. Heading 4
    </h4>
    <h5 class="mt-3 text-lg font-medium leading-none">
        h5. Heading 5
    </h5>
    <h6 class="mt-3 font-medium leading-none">h6. Heading 6</h6>
</div>
<div class="mt-5">
    <h1 class="text-4xl font-medium leading-none text-primary">
        h1. Heading 1
    </h1>
    <h2 class="mt-3 text-3xl font-medium leading-none text-slate-600 dark:text-slate-500">
        h2. Heading 2
    </h2>
    <h3 class="mt-3 text-2xl font-medium leading-none text-success">
        h3. Heading 3
    </h3>
    <h4 class="mt-3 text-xl font-medium leading-none text-warning">
        h4. Heading 4
    </h4>
    <h5 class="mt-3 text-lg font-medium leading-none text-danger">
        h5. Heading 5
    </h5>
    <h6 class="mt-3 font-medium leading-none text-slate-500">
        h6. Heading 6
    </h6>
</div>

Text Settings

Example text
Example medium text
Example semibold text
Example bolder text
Example boldest text
Example uppercase text
Example lowercase text
Example capitalized text
Example cursive text
            <div>
    <div class="font-normal">Example text</div>
    <div class="font-medium">Example medium text</div>
    <div class="font-semibold">Example semibold text</div>
    <div class="font-bold">Example bolder text</div>
    <div class="font-extrabold">Example boldest text</div>
</div>
<div class="mt-5">
    <div class="uppercase">Example uppercase text</div>
    <div class="lowercase">Example lowercase text</div>
    <div class="capitalize">Example capitalized text</div>
    <div class="normal-case">Example cursive text</div>
</div>

Common Elements

You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text. This line of text is meant to be treated as no longer accurate. This line of text is meant to be treated as an addition to the document. This line of text will render as underlined This line of text is meant to be treated as fine print. This line rendered as bold text. This line rendered as italicized text. 
            <div>
    You can use the mark tag to
    <mark class="bg-yellow-200 p-1">highlight</mark> text.
</div>
<del class="mt-1 block">This line of text is meant to be treated as deleted text.</del>
<s class="mt-1 block">This line of text is meant to be treated as no longer
    accurate.</s>
<ins class="mt-1 block">This line of text is meant to be treated as an addition to the
    document.</ins>
<u class="mt-1 block">This line of text will render as underlined</u>
<small class="mt-1 block">This line of text is meant to be treated as fine print.</small>
<strong class="mt-1 block">This line rendered as bold text.</strong>
<em class="mt-1 block">This line rendered as italicized text.</em>

Badges

Basic Badge
1 2 3 4 5 6
Badge Sizes
1 2 3 4 5 6
1 2 3 4 5 6
1 2 3 4 5 6
Square Badge
1 2 3 4 5 6
Outline Badge
1 2 3 4 5 
            <div class="font-medium">Basic Badge</div>
<div class="mt-2">
    <span class="mr-1 rounded-full bg-primary px-1 text-xs text-white">1</span>
    <span class="mr-1 rounded-full border px-1 text-xs text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300">2</span>
    <span class="mr-1 rounded-full bg-success px-1 text-xs text-white">3</span>
    <span class="mr-1 rounded-full bg-warning px-1 text-xs text-white">4</span>
    <span class="mr-1 rounded-full bg-danger px-1 text-xs text-white">5</span>
    <span class="mr-1 rounded-full bg-slate-100 px-1 text-xs text-slate-500 dark:bg-darkmode-800 dark:text-slate-300">6</span>
</div>
<div class="mt-6 font-medium">Badge Sizes</div>
<div class="mt-3">
    <span class="mr-1 rounded-full bg-primary px-2 py-1 text-white">1</span>
    <span class="mr-1 rounded-full border px-2 py-1 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300">2</span>
    <span class="mr-1 rounded-full bg-success px-2 py-1 text-white">3</span>
    <span class="mr-1 rounded-full bg-warning px-2 py-1 text-white">4</span>
    <span class="mr-1 rounded-full bg-danger px-2 py-1 text-white">5</span>
    <span class="mr-1 rounded-full bg-slate-100 px-2 py-1 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300">6</span>
</div>
<div class="mt-4">
    <span class="mr-1 rounded-full bg-primary px-3 py-2 text-white">1</span>
    <span class="mr-1 rounded-full border px-3 py-2 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300">2</span>
    <span class="mr-1 rounded-full bg-success px-3 py-2 text-white">3</span>
    <span class="mr-1 rounded-full bg-warning px-3 py-2 text-white">4</span>
    <span class="mr-1 rounded-full bg-danger px-3 py-2 text-white">5</span>
    <span class="mr-1 rounded-full bg-slate-100 px-3 py-2 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300">6</span>
</div>
<div class="mt-6">
    <span class="mr-1 rounded-full bg-primary px-4 py-3 text-white">1</span>
    <span class="mr-1 rounded-full border px-4 py-3 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300">2</span>
    <span class="mr-1 rounded-full bg-success px-4 py-3 text-white">3</span>
    <span class="mr-1 rounded-full bg-warning px-4 py-3 text-white">4</span>
    <span class="mr-1 rounded-full bg-danger px-4 py-3 text-white">5</span>
    <span class="mr-1 rounded-full bg-slate-100 px-4 py-3 text-slate-500 dark:bg-darkmode-800 dark:text-slate-300">6</span>
</div>
<div class="mt-10 font-medium">Square Badge</div>
<div class="mt-2">
    <span class="mr-1 bg-primary px-1 text-xs text-white">1</span>
    <span class="mr-1 border px-1 text-xs text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300">2</span>
    <span class="mr-1 bg-success px-1 text-xs text-white">3</span>
    <span class="mr-1 bg-warning px-1 text-xs text-white">4</span>
    <span class="mr-1 bg-danger px-1 text-xs text-white">5</span>
    <span class="mr-1 bg-slate-100 px-1 text-xs text-slate-500 dark:bg-darkmode-800 dark:text-slate-300">6</span>
</div>
<div class="mt-6 font-medium">Outline Badge</div>
<div class="mt-4">
    <span class="mr-1 rounded-full border border-primary px-3 py-2 text-primary dark:border-primary">1</span>
    <span class="mr-1 rounded-full border px-3 py-2 text-slate-600 dark:border-darkmode-100/40 dark:text-slate-300">2</span>
    <span class="mr-1 rounded-full border border-success px-3 py-2 text-success dark:border-success">3</span>
    <span class="mr-1 rounded-full border border-warning px-3 py-2 text-warning dark:border-warning">4</span>
    <span class="mr-1 rounded-full border border-danger px-3 py-2 text-danger dark:border-danger">5</span>
</div>

Separator

            <div class="w-full border-t border-dashed border-slate-200/60 dark:border-darkmode-400"></div>
<div class="mt-5 w-full border-t border-slate-200/60 dark:border-darkmode-400"></div>

Divider

or 
            <div class="mt-2 flex w-full justify-center border-t border-slate-200/60 dark:border-darkmode-400">
    <div class="-mt-3 bg-white px-5 text-slate-500 dark:bg-darkmode-600">
        or
    </div>
</div>

Links

Primary state Secondary state Success state Warning state Danger state 
            <div>
    <a class="block font-normal text-primary" href="">Example text</a>
    <a class="block font-medium text-primary" href="">Example medium text</a>
    <a class="block font-semibold text-primary" href="">Example semibold text</a>
    <a class="block font-bold text-primary" href="">Example bolder text</a>
    <a class="block font-extrabold text-primary" href="">Example boldest text</a>
</div>
<div class="mt-5">
    <a class="block text-primary" href="">Primary state</a>
    <a class="block text-slate-600 dark:text-slate-500" href="">Secondary state</a>
    <a class="block text-success" href="">Success state</a>
    <a class="block text-warning" href="">Warning state</a>
    <a class="block text-danger" href="">Danger state</a>
</div>