leandrocfe

/** 
https://gist.github.com/leandrocfe/1183bd73a58b21496306c12c326d78db
*/

/** main color: #014bde */

/** tailwind.config.js 
theme: {
    fontSize: {
        'xs': '0.75rem',

leandrocfe

<div class="flex justify-start gap-2">

    <div>
        <svg height="30" viewBox="0 -.11376601 49.74245785 51.31690859" width="30"
            xmlns="http://www.w3.org/2000/svg">
            <path
                d="m49.626 11.564a.809.809 0 0 1 .028.209v10.972a.8.8 0 0 1 -.402.694l-9.209 5.302v10.509c0 .286-.152.55-.4.694l-19.223 11.066c-.044.025-.092.041-.14.058-.018.006-.035.017-.054.022a.805.805 0 0 1 -.41 0c-.022-.006-.042-.018-.063-.026-.044-.016-.09-.03-.132-.054l-19.219-11.066a.801.801 0 0 1 -.402-.694v-32.916c0-.072.01-.142.028-.21.006-.023.02-.044.028-.067.015-.042.029-.085.051-.124.015-.026.037-.047.055-.071.023-.032.044-.065.071-.093.023-.023.053-.04.079-.06.029-.024.055-.05.088-.069h.001l9.61-5.533a.802.802 0 0 1 .8 0l9.61 5.533h.002c.032.02.059.045.088.068.026.02.055.038.078.06.028.029.048.062.072.094.017.024.04.045.054.071.023.04.036.082.052.124.008.023.022.044.028.068a.809.809 0 0 1 .028.209v20.559l8.008-4.611v-10.51c0-.07.01-.141.028-.208.007-.024.02-.045.028-.068.016-.042.03-.085.052-.124.

leandrocfe

/*
colors
#0d659d
#7b2cbf
*/

.fi-sidebar {
    @apply bg-primary-600 dark:bg-transparent !important;
}

leandrocfe

<div class="flex-1 px-4 py-6 overflow-y-auto sm:px-6">
    <div class="flow-root">
        <ul role="list" class="-my-6 divide-y divide-gray-200">
            <li class="flex py-6">
                <div class="flex-shrink-0 w-24 h-24 overflow-hidden border border-gray-200 rounded-md">
                    <img src="https://tailwindui.com/img/ecommerce-images/shopping-cart-page-04-product-01.jpg"
                        alt="Salmon orange fabric pouch with match zipper, gray zipper pull, and adjustable hip belt."
                        class="object-cover object-center w-full h-full">
                </div>

leandrocfe

<div class="bg-white dark:bg-gray-800">
    <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
        <div class="fixed inset-0 bg-black bg-opacity-25"></div>

        <div class="fixed inset-0 z-40 flex">
            <div
                class="relative flex flex-col w-full max-w-xs pb-12 overflow-y-auto bg-white dark:bg-gray-800 shadow-xl">
                <div class="flex px-4 pt-5 pb-2">
                    <button type="button"
                        class="inline-flex items-center justify-center p-2 -m-2 text-gray-400 dark:text-white rounded-md">

leandrocfe

{
    "AC": "Acre",
    "AL": "Alagoas",
    "AP": "Amapá",
    "AM": "Amazonas",
    "BA": "Bahia",
    "CE": "Ceara",
    "DF": "Distrito Federal",
    "ES": "Espírito Santo",
    "GO": "Goiás",