Tailwind Admin material Layout Templates inspired by creative-tim material theme
Web2tailwind.com

Output

Code

<!DOCTYPE html>
<html lang="en" x-data="{nav:false}" :class="{'nav-open':nav}">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tailwind Admin Panel</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|[email protected];300;500" rel="stylesheet">
    <link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<style>
    @media  screen and (min-width:991px) {
        .image-menu {
            padding-left: .75rem;
            padding-right: .75rem;
        }

        .sidebar-mini .sidebar {
            width: 80px;
        }

        .sidebar-mini .main-content {
            width: calc(100% - 80px);
        }

        .sidebar-mini img.menu-icon {
            padding-left: 0;
            padding-right: 0;
        }

        .sidebar-mini .menu-text {
            transform: translate3d(-25px, 0, 0);
            opacity: 0;
            transition: all .3s linear;
        }

        .sidebar-mini .sidebar:hover {
            width: 20%;
        }

        .sidebar,
        .main-content {
            transition-property: top, bottom, width;
            transition-duration: .2s, .2s, .35s;
            transition-timing-function: linear, linear, ease;
        }

        .sidebar-mini .sidebar:hover .menu-text {
            transform: translateZ(0);
            opacity: 1;
        }
    }

    @media  screen and (max-width: 991px) {
        .sidebar {
            width: 260px;
            position: fixed;
            top: 0;
            right: 0;
            transform: translate3d(260px, 0, 0);
            transition: all .33s cubic-bezier(.685, .0473, .346, 1);
        }

        .nav-open .sidebar {
            transform: translateZ(0);
        }

        .main-content {
            transition: all .33s cubic-bezier(.685, .0473, .346, 1);
        }

        .nav-open .main-content {
            left: 0;
            transform: translate3d(-260px, 0, 0);
        }
    }
</style>

<body style="font-family:Roboto">
    <div id="app" class="relative h-screen">
        <div class="sidebar w-1/5 fixed h-screen bg-gray-800 z-10">
            <div class="image-menu flex items-center mx-2 py-6 overflow-hidden z-10 border-b border-gray-700">
    <img class="menu-icon border-2 w-10 h-10 rounded-full"
        src="http://web2tailwind.com/assets/docs/master/image-01.jpg">
    <div class="menu-text text-gray-100 ml-4">WEB2TAILWIND</div>
</div>
<div class="flex mx-4 px-3 rounded py-3 bg-red-500 mt-6 mb-3">
    <a href="#" class="flex">
        <i class="material-icons fill-current text-gray-100">dashboard</i>
        <div class="menu-text text-gray-100 ml-4">Dashboard</div>
    </a>
</div>
<div class="flex mx-4 mb-3">
    <a href="#" x-data="{show:false}" class="w-full flex flex-col" @click="show=!show">
        <div class="w-full flex justify-between px-3 hover:bg-gray-700 rounded py-3" :class="{'bg-gray-700':show}">
            <div class="flex">
                <i class="material-icons fill-current text-gray-100">image</i>
                <div class="relative menu-text text-gray-100 ml-4">
                    Pages
                </div>
            </div>
            <span class="transition ease-in duration-150 text-gray-100 material-icons transform"
                :class="{'rotate-180':show}">
                arrow_drop_down
            </span>
        </div>
        <div x-show="show" class="transition ease-in duration-700 mt-3 bg-gray-800">
            <div class="w-full flex px-3 hover:bg-gray-700 rounded py-3 mb-3">
                <span class="w-6 text-center text-xs text-gray-100">P</span>
                <div class="relative text-xs font-light menu-text text-gray-100 ml-4">
                    Pricing
                </div>
            </div>
            <div class="w-full flex px-3 hover:bg-gray-700 rounded py-3 mb-3">
                <span class="w-6 text-center text-xs text-gray-100">RS</span>
                <div class="relative text-xs font-light menu-text text-gray-100 ml-4">
                    RTL Support
                </div>
            </div>
        </div>
    </a>
</div>
        </div>
        <div class="main-content h-screen  bg-gray-100 w-full md:w-4/5 reltive float-right"
            :class="{'bg-gray-900 bg-opacity-75':nav}">
            <div @click.away="nav = false" class="container mx-auto md:px-6 py-2 z-20" :class="{'opacity-75':nav}">
    <button
        class="hidden md:inline-flex rounded-full bg-white items-center justify-center h-10 w-10 hover:shadow-lg focus:outline-none"
        onclick="document.querySelector('body').classList.toggle('sidebar-mini');" class="text-gray-500"><span
            class="material-icons">more_vert</span>
    </button>
    <div class="flex mx-4 items-center justify-between md:hidden">
        <h1 class="font-light text-lg text-gray-700">Dashboard</h1>
        <button x-show="nav == false"
            class="flex items-center justify-center h-10 w-10 md:hidden text-gray-500 focus:outline-none"
            @click="nav=true">
            <span class="material-icons">menu</span>
        </button>
        <button x-show="nav"
            class="flex items-center justify-center h-10 w-10 md:hidden text-gray-500 focus:outline-none"
            @click="nav=false">
            <span class="material-icons">close</span>
        </button>
    </div>
</div>
                    </div>
    </div>
</body>

</html>
© 2019 - 2020 Web2tailwind.com