Published on

Beginners Guide: Build A Fully Interactive Smartphone With Tailwind CSS

Tags
AlpinejsFormsLoginsNavigationsPages
Fully interactive smartphone

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Fully interactive smartphone ui component

Password is 1111 and you can change it in the settings

Why use Tailwind CSS to make a Fully interactive smartphone ui component?

  • It can make the building process of Fully interactive smartphone ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Fully interactive smartphone component file.

The preview of Fully interactive smartphone ui component

Free download of the Fully interactive smartphone's source code

The source code of Fully interactive smartphone ui component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive smartphone | TailwindCSS x AlpineJS v3</title>
    <link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet" />
    <script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
    <style>
      .bg1 {
        background-image: url("https://i.pinimg.com/originals/a3/ae/b5/a3aeb5bc3ae525341f2f60685d31c10a.jpg");
      }
      .bg2 {
        background-image: url("https://image.winudf.com/v2/image/Y29tLm9vbm9fd2FsbHBhcGVyX3M5X3BsdXNfZ2FsYXh5X3hfbm90ZV85XzhfbWlfbWl4X3NjcmVlbl8wXzE1MjU4MTY4NzZfMDMy/screen-0.jpg?fakeurl=1&type=.jpg");
      }
      .bg3 {
        background-image: url("https://wallpapersflix.com/aesthetic/wp-content/uploads/2020/08/Aesthetic-Android-Background.jpg");
      }
      .bg4 {
        background-image: url("https://images.unsplash.com/photo-1505322022379-7c3353ee6291?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Nnx8fGVufDB8fHw%3D&w=1000&q=80");
      }
      .bg5 {
        background-image: url("https://images.pexels.com/photos/1368382/pexels-photo-1368382.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
      }
      .bg6 {
        background-image: url("https://www.planetware.com/wpimages/2020/02/france-in-pictures-beautiful-places-to-photograph-eiffel-tower.jpg");
      }
      .bg7 {
        background-image: url("https://media.nature.com/lw800/magazine-assets/d41586-020-01430-5/d41586-020-01430-5_17977552.jpg");
      }
      .bg8 {
        background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");
      }
      .bg9 {
        background-image: url("https://merriam-webster.com/assets/mw/images/article/art-wap-landing-mp-lg/[email protected]");
      }
      .bg10 {
        background-image: url("https://2.bp.blogspot.com/-rAvZDK7KWWU/W4GIDCyrHTI/AAAAAAAAAFI/cn250kQYsD8_u8P-6FkrBixQ3QZ4ApsxACLcBGAs/s1600/route_google_map.png");
      }
      .mobile-screen {
        width: 340px;
        height: 640px;
      }
      .no-tap-highlight {
        -webkit-tap-highlight-color: transparent;
      }
    </style>
  </head>
  <body>
    <main class="h-screen flex items-center justify-center">
      <div
        x-data="smartphone"
        class="shadow-2xl border-8 mobile-screen border-gray-800 rounded-3xl bg-center bg-no-repeat bg-cover overflow-hidden flex flex-col justify-start"
        :class="background.current"
      >
        <!-- Battery -->
        <div
          class="flex flex-row justify-end items-center pr-3 transition-colors"
          :class="step > 2 ? 'bg-gray-100' : 'bg-transparent'"
        >
          <svg
            x-show="step === 3"
            class="fill-current h-3 w-6 text-white"
            :class="step > 2 ? 'text-gray-800' : 'text-white'"
            viewBox="0 0 20 20"
          >
            <path
              d="M15.808,14.066H6.516v-1.162H5.354v1.162H4.193c-0.321,0-0.581,0.26-0.581,0.58s0.26,0.58,0.581,0.58h1.162
                  v1.162h1.162v-1.162h9.292c0.32,0,0.58-0.26,0.58-0.58S16.128,14.066,15.808,14.066z M15.808,9.419h-1.742V8.258h-1.162v1.161
                  h-8.71c-0.321,0-0.581,0.26-0.581,0.581c0,0.321,0.26,0.581,0.581,0.581h8.71v1.161h1.162v-1.161h1.742
                  c0.32,0,0.58-0.26,0.58-0.581C16.388,9.679,16.128,9.419,15.808,9.419z M17.55,0.708H2.451c-0.962,0-1.742,0.78-1.742,1.742v15.1
                  c0,0.961,0.78,1.74,1.742,1.74H17.55c0.962,0,1.742-0.779,1.742-1.74v-15.1C19.292,1.488,18.512,0.708,17.55,0.708z M18.13,17.551
                  c0,0.32-0.26,0.58-0.58,0.58H2.451c-0.321,0-0.581-0.26-0.581-0.58v-15.1c0-0.321,0.26-0.581,0.581-0.581H17.55
                  c0.32,0,0.58,0.26,0.58,0.581V17.551z M15.808,4.774H9.419V3.612H8.258v1.162H4.193c-0.321,0-0.581,0.26-0.581,0.581
                  s0.26,0.581,0.581,0.581h4.065v1.162h1.161V5.935h6.388c0.32,0,0.58-0.26,0.58-0.581S16.128,4.774,15.808,4.774z"
            ></path>
          </svg>
          <svg
            class="fill-current h-3.5 w-6 text-white"
            :class="step > 2 ? 'text-gray-800' : 'text-white'"
            viewBox="0 0 20 20"
          >
            <path
              d="M16.803,18.615h-4.535c-1,0-1.814-0.812-1.814-1.812v-4.535c0-1.002,0.814-1.814,1.814-1.814h4.535c1.001,0,1.813,0.812,1.813,1.814v4.535C18.616,17.803,17.804,18.615,16.803,18.615zM17.71,12.268c0-0.502-0.405-0.906-0.907-0.906h-4.535c-0.501,0-0.906,0.404-0.906,0.906v4.535c0,0.502,0.405,0.906,0.906,0.906h4.535c0.502,0,0.907-0.404,0.907-0.906V12.268z M16.803,9.546h-4.535c-1,0-1.814-0.812-1.814-1.814V3.198c0-1.002,0.814-1.814,1.814-1.814h4.535c1.001,0,1.813,0.812,1.813,1.814v4.534C18.616,8.734,17.804,9.546,16.803,9.546zM17.71,3.198c0-0.501-0.405-0.907-0.907-0.907h-4.535c-0.501,0-0.906,0.406-0.906,0.907v4.534c0,0.501,0.405,0.908,0.906,0.908h4.535c0.502,0,0.907-0.406,0.907-0.908V3.198z M7.733,18.615H3.198c-1.002,0-1.814-0.812-1.814-1.812v-4.535c0-1.002,0.812-1.814,1.814-1.814h4.535c1.002,0,1.814,0.812,1.814,1.814v4.535C9.547,17.803,8.735,18.615,7.733,18.615zM8.64,12.268c0-0.502-0.406-0.906-0.907-0.906H3.198c-0.501,0-0.907,0.404-0.907,0.906v4.535c0,0.502,0.406,0.906,0.907,0.906h4.535c0.501,0,0.907-0.404,0.907-0.906V12.268z M7.733,9.546H3.198c-1.002,0-1.814-0.812-1.814-1.814V3.198c0-1.002,0.812-1.814,1.814-1.814h4.535c1.002,0,1.814,0.812,1.814,1.814v4.534C9.547,8.734,8.735,9.546,7.733,9.546z M8.64,3.198c0-0.501-0.406-0.907-0.907-0.907H3.198c-0.501,0-0.907,0.406-0.907,0.907v4.534c0,0.501,0.406,0.908,0.907,0.908h4.535c0.501,0,0.907-0.406,0.907-0.908V3.198z"
            ></path>
          </svg>
          <p
            class="text-xs font-semibold"
            :class="step > 2 ? 'text-gray-800' : 'text-white'"
            x-text="batteryPower"
          >
            10%
          </p>
          <svg
            class="fill-current h-4 w-6 text-white"
            :class="step > 2 ? 'text-gray-800' : 'text-white'"
            viewBox="0 0 20 20"
          >
            <path
              d="M18.834,6.961h-0.655V5.18c0-0.459-0.373-0.834-0.834-0.834H1.166c-0.461,0-0.834,0.375-0.834,0.834v9.64c0,0.461,0.373,0.834,0.834,0.834h16.179c0.461,0,0.834-0.373,0.834-0.834v-1.711h0.655c0.461,0,0.834-0.372,0.834-0.834v-4.48C19.669,7.334,19.295,6.961,18.834,6.961z M16.511,13.986H2V6.014h14.511v1.781v4.48V13.986z"
            ></path>
            <rect x="2.8" y="6.775" width="2.612" height="6.448"></rect>
          </svg>
        </div>

        <!-- Intoduction -->
        <div
          class="w-full h-full flex flex-col items-center justify-between cursor-pointer py-8 px-5"
          x-show="step === 0"
          @click="step = 1"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="-translate-y-full"
          x-transition:enter-end="translate-y-0"
        >
          <div>
            <h2 class="text-white text-4xl" x-text="getTime()"></h2>
            <h3 class="text-white text-base" x-text="getDate()"></h3>
          </div>
          <h2 class="text-white">Click on screen</h2>
        </div>

        <!-- Password -->
        <div
          class="w-full h-full flex flex-col justify-center p-5"
          x-show="step === 1"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="translate-y-full"
          x-transition:enter-end="translate-y-0"
        >
          <h1 class="flex justify-center my-5 font-semibold text-2xl h-10 text-white">
            <span class="" x-text="showPassword"></span>
          </h1>
          <ul class="grid grid-cols-3 grid-rows-4 justify-items-center gap-5">
            <li
              @click="setPassword(1)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              1
            </li>
            <li
              @click="setPassword(2)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              2
            </li>
            <li
              @click="setPassword(3)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              3
            </li>
            <li
              @click="setPassword(4)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              4
            </li>
            <li
              @click="setPassword(5)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              5
            </li>
            <li
              @click="setPassword(6)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              6
            </li>
            <li
              @click="setPassword(7)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              7
            </li>
            <li
              @click="setPassword(8)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              8
            </li>
            <li
              @click="setPassword(9)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              9
            </li>
            <li
              @click="deletePassword()"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              <svg class="fill-current w-6 h-6 text-gray-800" viewBox="0 0 20 20">
                <path
                  d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
                ></path>
              </svg>
            </li>
            <li
              @click="setPassword(0)"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              0
            </li>
            <li
              @click="checkPassword()"
              class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
            >
              <svg class="fill-current w-6 h-6 text-gray-800" viewBox="0 0 20 20">
                <path
                  d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                ></path>
              </svg>
            </li>
          </ul>
        </div>

        <!-- Main -->
        <div
          x-show="step === 2"
          class="w-full h-full flex flex-col justify-between py-8 px-5"
          x-show="step === 1"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="translate-x-full"
          x-transition:enter-end="translate-x-0"
        >
          <div>
            <h2 class="text-white text-4xl" x-text="getTime()"></h2>
            <h3 class="text-white text-base" x-text="getDate()"></h3>
          </div>
          <ul class="grid grid-rows-2 grid-cols-3 gap-4">
            <li @click="step = 3" class="text-white text-center flex flex-col items-center cursor-pointer">
              <svg
                class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
                viewBox="0 0 20 20"
              >
                <path
                  d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"
                ></path>
              </svg>
              <p class="text-xs">Settings</p>
            </li>
            <li @click="step = 4" class="text-white text-center flex flex-col items-center cursor-pointer">
              <svg
                class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
                viewBox="0 0 20 20"
              >
                <path
                  d="M18.555,15.354V4.592c0-0.248-0.202-0.451-0.45-0.451H1.888c-0.248,0-0.451,0.203-0.451,0.451v10.808c0,0.559,0.751,0.451,0.451,0.451h16.217h0.005C18.793,15.851,18.478,14.814,18.555,15.354 M2.8,14.949l4.944-6.464l4.144,5.419c0.003,0.003,0.003,0.003,0.003,0.005l0.797,1.04H2.8z M13.822,14.949l-1.006-1.317l1.689-2.218l2.688,3.535H13.822z M17.654,14.064l-2.791-3.666c-0.181-0.237-0.535-0.237-0.716,0l-1.899,2.493l-4.146-5.42c-0.18-0.237-0.536-0.237-0.716,0l-5.047,6.598V5.042h15.316V14.064z M12.474,6.393c-0.869,0-1.577,0.707-1.577,1.576s0.708,1.576,1.577,1.576s1.577-0.707,1.577-1.576S13.343,6.393,12.474,6.393 M12.474,8.645c-0.371,0-0.676-0.304-0.676-0.676s0.305-0.676,0.676-0.676c0.372,0,0.676,0.304,0.676,0.676S12.846,8.645,12.474,8.645"
                ></path>
              </svg>
              <p class="text-xs">Pictures</p>
            </li>
            <li @click="step = 5" class="text-white text-center flex flex-col items-center cursor-pointer">
              <svg
                class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
                viewBox="0 0 20 20"
              >
                <path
                  d="M10,6.536c-2.263,0-4.099,1.836-4.099,4.098S7.737,14.732,10,14.732s4.099-1.836,4.099-4.098S12.263,6.536,10,6.536M10,13.871c-1.784,0-3.235-1.453-3.235-3.237S8.216,7.399,10,7.399c1.784,0,3.235,1.452,3.235,3.235S11.784,13.871,10,13.871M17.118,5.672l-3.237,0.014L12.52,3.697c-0.082-0.105-0.209-0.168-0.343-0.168H7.824c-0.134,0-0.261,0.062-0.343,0.168L6.12,5.686H2.882c-0.951,0-1.726,0.748-1.726,1.699v7.362c0,0.951,0.774,1.725,1.726,1.725h14.236c0.951,0,1.726-0.773,1.726-1.725V7.195C18.844,6.244,18.069,5.672,17.118,5.672 M17.98,14.746c0,0.477-0.386,0.861-0.862,0.861H2.882c-0.477,0-0.863-0.385-0.863-0.861V7.384c0-0.477,0.386-0.85,0.863-0.85l3.451,0.014c0.134,0,0.261-0.062,0.343-0.168l1.361-1.989h3.926l1.361,1.989c0.082,0.105,0.209,0.168,0.343,0.168l3.451-0.014c0.477,0,0.862,0.184,0.862,0.661V14.746z"
                ></path>
              </svg>
              <p class="text-xs">Camera</p>
            </li>
            <li @click="step = 6" class="text-white text-center flex flex-col items-center cursor-pointer">
              <svg
                class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
                viewBox="0 0 20 20"
              >
                <path
                  d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"
                ></path>
              </svg>
              <p class="text-xs">Fake Maps</p>
            </li>
            <li @click="step = 0" class="text-white text-center flex flex-col items-center cursor-pointer">
              <svg
                class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
                viewBox="0 0 20 20"
              >
                <path
                  d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"
                ></path>
              </svg>
              <p class="text-xs">Lock screen</p>
            </li>
            <li @click="step = 8" class="text-white text-center flex flex-col items-center cursor-pointer">
              <svg
                class="fill-current w-12 h-12 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 mb-1"
                viewBox="0 0 20 20"
              >
                <path
                  d="M17.211,3.39H2.788c-0.22,0-0.4,0.18-0.4,0.4v9.614c0,0.221,0.181,0.402,0.4,0.402h3.206v2.402c0,0.363,0.429,0.533,0.683,0.285l2.72-2.688h7.814c0.221,0,0.401-0.182,0.401-0.402V3.79C17.612,3.569,17.432,3.39,17.211,3.39M16.811,13.004H9.232c-0.106,0-0.206,0.043-0.282,0.117L6.795,15.25v-1.846c0-0.219-0.18-0.4-0.401-0.4H3.189V4.19h13.622V13.004z"
                ></path>
              </svg>
              <p class="text-xs">Messages</p>
            </li>
          </ul>
        </div>

        <!-- Settings -->
        <div
          class="w-full h-full flex flex-col justify-start bg-gray-100"
          x-show="step === 3"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="scale-0"
          x-transition:enter-end="scale-100"
        >
          <header class="flex flex-row items-center p-1">
            <svg
              @click="step = 2"
              class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
              viewBox="0 0 20 20"
            >
              <path
                d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
              ></path>
            </svg>
            <h2 class="w-full text-xl font-semibold">Settings</h2>
          </header>
          <main class="px-5 overflow-y-auto overflow-x-hidden">
            <h2 class="mb-3 font-semibold">Background</h2>
            <ul class="grid grid-rows-2 grid-cols-2 gap-4">
              <template x-for="bg in background.collection">
                <li
                  @click="background.current = bg"
                  :class="background.current === bg ? `border-purple-500 ${bg}` : `border-gray-100 ${bg}`"
                  class="w-full h-28 bg-center bg-no-repeat bg-cover cursor-pointer shadow-md rounded-md border-4"
                ></li>
              </template>
            </ul>
            <h2 class="my-3 font-semibold">Password</h2>
            <ul class="grid grid-rows-2 grid-cols-2 gap-4">
              <li
                @click="step = 7"
                class="w-full h-28 cursor-pointer shadow-md rounded-md border-4 flex flex-col items-center p-1"
              >
                <svg class="fill-current w-12 h-12" viewBox="0 0 20 20">
                  <path
                    d="M12.319,5.792L8.836,2.328C8.589,2.08,8.269,2.295,8.269,2.573v1.534C8.115,4.091,7.937,4.084,7.783,4.084c-2.592,0-4.7,2.097-4.7,4.676c0,1.749,0.968,3.337,2.528,4.146c0.352,0.194,0.651-0.257,0.424-0.529c-0.415-0.492-0.643-1.118-0.643-1.762c0-1.514,1.261-2.747,2.787-2.747c0.029,0,0.06,0,0.09,0.002v1.632c0,0.335,0.378,0.435,0.568,0.245l3.483-3.464C12.455,6.147,12.455,5.928,12.319,5.792 M8.938,8.67V7.554c0-0.411-0.528-0.377-0.781-0.377c-1.906,0-3.457,1.542-3.457,3.438c0,0.271,0.033,0.542,0.097,0.805C4.149,10.7,3.775,9.762,3.775,8.76c0-2.197,1.798-3.985,4.008-3.985c0.251,0,0.501,0.023,0.744,0.069c0.212,0.039,0.412-0.124,0.412-0.34v-1.1l2.646,2.633L8.938,8.67z M14.389,7.107c-0.34-0.18-0.662,0.244-0.424,0.529c0.416,0.493,0.644,1.118,0.644,1.762c0,1.515-1.272,2.747-2.798,2.747c-0.029,0-0.061,0-0.089-0.002v-1.631c0-0.354-0.382-0.419-0.558-0.246l-3.482,3.465c-0.136,0.136-0.136,0.355,0,0.49l3.482,3.465c0.189,0.186,0.568,0.096,0.568-0.245v-1.533c0.153,0.016,0.331,0.022,0.484,0.022c2.592,0,4.7-2.098,4.7-4.677C16.917,9.506,15.948,7.917,14.389,7.107 M12.217,15.238c-0.251,0-0.501-0.022-0.743-0.069c-0.212-0.039-0.411,0.125-0.411,0.341v1.101l-2.646-2.634l2.646-2.633v1.116c0,0.174,0.126,0.318,0.295,0.343c0.158,0.024,0.318,0.034,0.486,0.034c1.905,0,3.456-1.542,3.456-3.438c0-0.271-0.032-0.541-0.097-0.804c0.648,0.719,1.022,1.659,1.022,2.66C16.226,13.451,14.428,15.238,12.217,15.238"
                  ></path>
                </svg>
                <p class="text-center">Change password</p>
              </li>
            </ul>
          </main>
        </div>

        <!-- Picures -->
        <div
          class="w-full h-full flex flex-col justify-start bg-gray-100 pb-2"
          x-show="step === 4"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="scale-0"
          x-transition:enter-end="scale-100"
        >
          <header class="flex flex-row items-center p-1">
            <svg
              @click="step = 2"
              class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
              viewBox="0 0 20 20"
            >
              <path
                d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
              ></path>
            </svg>
            <h2 class="w-full text-xl font-semibold">Pictures</h2>
          </header>
          <main class="px-5 overflow-y-auto overflow-x-hidden">
            <ul class="w-full grid grid-cols-2 gap-4 mb-4">
              <template x-for="picture in picture.collection">
                <li :class="picture" class="w-full h-28 bg-center bg-no-repeat bg-cover shadow-md rounded-md"></li>
              </template>
            </ul>
          </main>
        </div>

        <!-- Camera -->
        <div
          class="w-full h-full flex flex-col justify-start bg-gray-100"
          x-show="step === 5"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="scale-0"
          x-transition:enter-end="scale-100"
        >
          <header class="flex flex-row items-center p-1">
            <svg
              @click="step = 2"
              class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
              viewBox="0 0 20 20"
            >
              <path
                d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
              ></path>
            </svg>
            <h2 class="w-full text-xl font-semibold">Camera</h2>
          </header>
          <main class="px-5 h-full flex flex-col justify-center items-center">
            <svg class="fill-current text-red-600 w-14 h-14 mb-4" viewBox="0 0 20 20">
              <path
                d="M12.71,7.291c-0.15-0.15-0.393-0.15-0.542,0L10,9.458L7.833,7.291c-0.15-0.15-0.392-0.15-0.542,0c-0.149,0.149-0.149,0.392,0,0.541L9.458,10l-2.168,2.167c-0.149,0.15-0.149,0.393,0,0.542c0.15,0.149,0.392,0.149,0.542,0L10,10.542l2.168,2.167c0.149,0.149,0.392,0.149,0.542,0c0.148-0.149,0.148-0.392,0-0.542L10.542,10l2.168-2.168C12.858,7.683,12.858,7.44,12.71,7.291z M10,1.188c-4.867,0-8.812,3.946-8.812,8.812c0,4.867,3.945,8.812,8.812,8.812s8.812-3.945,8.812-8.812C18.812,5.133,14.867,1.188,10,1.188z M10,18.046c-4.444,0-8.046-3.603-8.046-8.046c0-4.444,3.603-8.046,8.046-8.046c4.443,0,8.046,3.602,8.046,8.046C18.046,14.443,14.443,18.046,10,18.046z"
              ></path>
            </svg>
            <h1>Oh no, something is wrong</h1>
          </main>
        </div>

        <!-- Fake Maps -->
        <div
          class="w-full h-full flex flex-col justify-start bg-gray-100"
          x-show="step === 6"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="scale-0"
          x-transition:enter-end="scale-100"
        >
          <header class="flex flex-row items-center p-1">
            <svg
              @click="step = 2"
              class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
              viewBox="0 0 20 20"
            >
              <path
                d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
              ></path>
            </svg>
            <h2 class="w-full text-xl font-semibold">Fake Maps</h2>
          </header>
          <main class="px-5 bg10 h-screen bg-center bg-cover shadow-md rounded-md"></main>
        </div>

        <!-- Change password -->
        <div
          class="w-full h-full flex flex-col justify-start bg-gray-100"
          x-show="step === 7"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="translate-x-full"
          x-transition:enter-end="translate-x-0"
        >
          <header class="flex flex-row items-center p-1">
            <svg
              @click="step = 3"
              class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
              viewBox="0 0 20 20"
            >
              <path
                d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
              ></path>
            </svg>
            <h2 class="w-full text-xl font-semibold">Change password</h2>
          </header>
          <main class="px-5 h-screen bg-center bg-cover shadow-md rounded-md">
            <h1 class="flex justify-center my-5 font-semibold text-2xl h-10 text-gray-800">
              <span class="" x-text="showPassword"></span>
            </h1>
            <ul class="grid grid-cols-3 grid-rows-4 justify-items-center gap-5">
              <li
                @click="setPassword(1)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                1
              </li>
              <li
                @click="setPassword(2)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                2
              </li>
              <li
                @click="setPassword(3)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                3
              </li>
              <li
                @click="setPassword(4)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                4
              </li>
              <li
                @click="setPassword(5)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                5
              </li>
              <li
                @click="setPassword(6)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                6
              </li>
              <li
                @click="setPassword(7)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                7
              </li>
              <li
                @click="setPassword(8)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                8
              </li>
              <li
                @click="setPassword(9)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                9
              </li>
              <li
                @click="deletePassword()"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                <svg class="fill-current w-6 h-6 text-gray-800" viewBox="0 0 20 20">
                  <path
                    d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
                  ></path>
                </svg>
              </li>
              <li
                @click="setPassword(0)"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                0
              </li>
              <li
                @click="changePassword()"
                class="p-3 bg-gray-200 bg-opacity-75 text-gray-800 rounded-full w-14 h-14 flex items-center justify-center shadow-sm font-semibold cursor-pointer hover:bg-gray-300 select-none no-tap-highlight"
              >
                <svg class="fill-current w-6 h-6 text-gray-800" viewBox="0 0 20 20">
                  <path
                    d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                  ></path>
                </svg>
              </li>
            </ul>
          </main>
        </div>

        <!-- Messages -->
        <div
          class="w-full h-full flex flex-col justify-start bg-gray-100"
          x-show="step === 8"
          x-transition:enter="transform transition-transform"
          x-transition:enter-start="scale-0"
          x-transition:enter-end="scale-100"
        >
          <header class="flex flex-row items-center p-1">
            <svg
              @click="step = 2"
              class="fill-current w-10 h-10 text-gray-800 bg-gray-100 bg-opacity-90 rounded-lg p-1 cursor-pointer"
              viewBox="0 0 20 20"
            >
              <path
                d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"
              ></path>
            </svg>
            <h2 class="w-full text-xl font-semibold">Messages</h2>
          </header>
          <main class="px-3 h-screen bg-center bg-cover shadow-md rounded-md">
            <ul class="flex flex-col">
              <li class="flex flex-row items-center my-2">
                <div
                  class="rounded-full w-10 h-10 bg-gray-200 flex-shrink-0 flex items-center justify-center shadow-md"
                >
                  <svg class="fill-current w-6 h-8 text-gray-800" viewBox="0 0 20 20">
                    <path
                      d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"
                    ></path>
                  </svg>
                </div>
                <div class="ml-3">
                  <p class="font-semibold">Mike</p>
                  <p class="text-xs">I like playing golf and tennis in my free time. How about you?</p>
                </div>
              </li>
              <li class="flex flex-row items-center my-2">
                <div
                  class="rounded-full w-10 h-10 bg-gray-200 flex-shrink-0 flex items-center justify-center shadow-md"
                >
                  <svg class="fill-current w-6 h-8 text-gray-800" viewBox="0 0 20 20">
                    <path
                      d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"
                    ></path>
                  </svg>
                </div>
                <div class="ml-3">
                  <p class="font-semibold">Tricia</p>
                  <p class="text-xs">Last weekend, I went to visit my friends in San Francisco. What...</p>
                </div>
              </li>
              <li class="flex flex-row items-center my-2">
                <div
                  class="rounded-full w-10 h-10 bg-gray-200 flex-shrink-0 flex items-center justify-center shadow-md"
                >
                  <svg class="fill-current w-6 h-8 text-gray-800" viewBox="0 0 20 20">
                    <path
                      d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"
                    ></path>
                  </svg>
                </div>
                <div class="ml-3">
                  <p class="font-semibold">Mum</p>
                  <p class="text-xs">Have a nice day!</p>
                </div>
              </li>
              <li class="flex flex-row items-center my-2">
                <div
                  class="rounded-full w-10 h-10 bg-gray-200 flex-shrink-0 flex items-center justify-center shadow-md"
                >
                  <svg class="fill-current w-6 h-8 text-gray-800" viewBox="0 0 20 20">
                    <path
                      d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"
                    ></path>
                  </svg>
                </div>
                <div class="ml-3">
                  <p class="font-semibold">Josh</p>
                  <p class="text-xs">How about tomorrow? Are you going to study English tomorrow?</p>
                </div>
              </li>
            </ul>
          </main>
        </div>
      </div>
    </main>
    <script>
      const vibrate = () => {

      };
      document.addEventListener("alpine:init", () => {
        Alpine.data("smartphone", () => ({
          init() {
            const handle = setInterval(() => (
              this.battery === 1 ? clearInterval(handle) : this.battery--
            ), 10000);
            setInterval(() => (this.date = new Date()), 1000);
          },
          step: 0,
          password: {
            current: [],
            correct: '1111'
          },
          background: {
            current: 'bg1',
            collection: ["bg1", "bg2", "bg3", "bg4", "bg5"]
          },
          picture: {
            collection: ["bg7", "bg1", "bg6", "bg2", "bg5", "bg8", "bg3", "bg9", "bg4"]
          },
          date: new Date(),
          battery: 15,
          get batteryPower() {
            return `${this.battery}%`;
          },
          formatTime(value) {
            return value < 10 ? `0${value}` : value;
          },
          getDate() {
            return new Date().toJSON().slice(0, 10).replace(/-/g, "/");
          },
          getTime() {
            const seconds = this.formatTime(this.date.getSeconds());
            const minutes = this.formatTime(this.date.getMinutes());
            const hours = this.formatTime(this.date.getHours());
            return `${hours}:${minutes}:${seconds}`;
          },
          showPassword() {
            return this.password.current.join(" ").replace(/[0-9]/g, '*');
          },
          setPassword(number) {
            this.vibrate(50);
            if (this.password.current.length > 3) return;
            this.password.current.push(number);
          },
          deletePassword() {
            this.vibrate(50);
            this.password.current = [];
          },
          checkPassword() {
            if (this.password.current.join("") !== this.password.correct) {
              this.vibrate(100);
              this.password.current = [];
              return;
            }
            this.step = 2;
            this.password.current = [];
          },
          changePassword() {
            if (this.password.current.length !== 4) return;
            this.password.correct = this.password.current.join("");
            this.password.current = [];
            this.step = 3;
          },
          vibrate(pattern) {
            navigator.vibrate(pattern);
          }
        }));
      });
    </script>
  </body>
</html>

How to make a Fully interactive smartphone with Tailwind CSS?

Install tailwind css of verion 2.2.4

Use the script html tag to import the script of Tailwind CSS of the version 2.2.4

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to make a Fully interactive smartphone component

  • h-screen
  • flex
  • border-8
  • border-gray-800
  • bg-center
  • bg-no-repeat
  • bg-cover
  • overflow-hidden
  • flex-col
  • justify-start
  • flex-row
  • pr-3
  • bg-gray-100
  • bg-transparent
  • h-3
  • w-6
  • text-white
  • text-gray-800
  • h-3.5
  • text-xs
  • h-4
  • w-full
  • h-full
  • py-8
  • px-5
  • text-4xl
  • text-base
  • p-5
  • my-5
  • text-2xl
  • h-10
  • grid
  • grid-cols-3
  • grid-rows-4
  • gap-5
  • p-3
  • bg-gray-200
  • bg-opacity-75
  • w-14
  • h-14
  • hover:bg-gray-300
  • h-6
  • grid-rows-2
  • gap-4
  • text-center
  • w-12
  • h-12
  • bg-opacity-90
  • p-1
  • mb-1
  • w-10
  • text-xl
  • overflow-y-auto
  • mb-3
  • grid-cols-2
  • h-28
  • border-4
  • my-3
  • pb-2
  • mb-4
  • text-red-600
  • px-3
  • my-2
  • flex-shrink-0
  • h-8
  • ml-3

66 steps to make a Fully interactive smartphone component with Tailwind CSS

  1. Use h-screen to make an element span the entire height of the viewport.

  2. Use flex to create a block-level flex container.

  3. Control the border color of an element to 2rem using the border-8 utilities.

  4. Control the border color of an element to gray-800 using the border-gray-800 utilities.

  5. Control the background color of an element to center using the bg-center utilities.

  6. Control the background color of an element to no-repeat using the bg-no-repeat utilities.

  7. Control the background color of an element to cover using the bg-cover utilities.

  8. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  9. Use flex to create a block-level flex container.

  10. Use justify-start to justify items against the start of the container’s main axis.

  11. Use flex to create a block-level flex container.

  12. Control the padding on right side of an element to 0.75rem using the pr-3 utilities.

  13. Control the background color of an element to gray-100 using the bg-gray-100 utilities.

  14. Control the background color of an element to transparent using the bg-transparent utilities.

  15. Use h-3 to set an element to a fixed height(0.75rem).

  16. Use w-6 to set an element to a fixed width(1.5rem).

  17. Control the text color of an element to white using the text-white utilities.

  18. Control the text color of an element to gray-800 using the text-gray-800 utilities.

  19. Use h-3.5 to set an element to a fixed height(3.5).

  20. Control the text color of an element to xs using the text-xs utilities.

  21. Use h-4 to set an element to a fixed height(1rem).

  22. Use w-full to set an element to a 100% based width.

  23. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  24. Control the vertical padding of an element to 2rem using the py-8 utilities.

  25. Control the horizontal padding of an element to 1.25rem using the px-5 utilities.

  26. Control the text color of an element to 4xl using the text-4xl utilities.

  27. Control the text color of an element to base using the text-base utilities.

  28. Control the padding on all sides of an element to 1.25rem using the p-5 utilities.

  29. Control the vertical margin of an element to 1.25rem using the my-5 utilities.

  30. Control the text color of an element to 2xl using the text-2xl utilities.

  31. Use h-10 to set an element to a fixed height(2.5rem).

  32. Use grid to create a grid container.

  33. Use grid to create a grid container.

  34. Use grid to create a grid container.

  35. To specify the width between columns, you can use the gap-5 utilities.

  36. Control the padding on all sides of an element to 0.75rem using the p-3 utilities.

  37. Control the background color of an element to gray-200 using the bg-gray-200 utilities.

  38. Control the background color of an element to opacity-75 using the bg-opacity-75 utilities.

  39. Use w-14 to set an element to a fixed width(3.5rem).

  40. Use h-14 to set an element to a fixed height(3.5rem).

  41. Control the background color of an element to gray-300 using the hover:bg-gray-300 utilities on hover.

  42. Use h-6 to set an element to a fixed height(1.5rem).

  43. Use grid to create a grid container.

  44. To specify the width between columns, you can use the gap-4 utilities.

  45. Control the text color of an element to center using the text-center utilities.

  46. Use w-12 to set an element to a fixed width(3rem).

  47. Use h-12 to set an element to a fixed height(3rem).

  48. Control the background color of an element to opacity-90 using the bg-opacity-90 utilities.

  49. Control the padding on all sides of an element to 0.25rem using the p-1 utilities.

  50. Control the margin on bottom side of an element to 0.25rem using the mb-1 utilities.

  51. Use w-10 to set an element to a fixed width(2.5rem).

  52. Control the text color of an element to xl using the text-xl utilities.

  53. Use overflow-y-auto to allow vertical scrolling if needed.

  54. Control the margin on bottom side of an element to 0.75rem using the mb-3 utilities.

  55. Use grid to create a grid container.

  56. Use h-28 to set an element to a fixed height(7rem).

  57. Control the border color of an element to 1rem using the border-4 utilities.

  58. Control the vertical margin of an element to 0.75rem using the my-3 utilities.

  59. Control the padding on bottom side of an element to 0.5rem using the pb-2 utilities.

  60. Control the margin on bottom side of an element to 1rem using the mb-4 utilities.

  61. Control the text color of an element to red-600 using the text-red-600 utilities.

  62. Control the horizontal padding of an element to 0.75rem using the px-3 utilities.

  63. Control the vertical margin of an element to 0.5rem using the my-2 utilities.

  64. Use flex to create a block-level flex container.

  65. Use h-8 to set an element to a fixed height(2rem).

  66. Control the margin on left side of an element to 0.75rem using the ml-3 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Fully interactive smartphone components, learn and follow along to implement your own components.