- Published on
Beginners Guide: Build A Fully Interactive Smartphone With Tailwind CSS
- What is Tailwind CSS?
- The Description of Fully Interactive Smartphone UI Component
- Why Use Tailwind CSS to Create a Fully Interactive Smartphone UI Component?
- The Preview of Fully Interactive Smartphone UI Component
- The Source Code of Fully Interactive Smartphone UI Component
- How to Create a Fully Interactive Smartphone with Tailwind CSS?
- Step 1: Set Up the HTML Structure
- Step 2: Style the Phone and Screen
- Step 3: Create the Home Screen
- Step 4: Add App Icons
- Step 5: Add Notification Center
- Step 6: Add App Screens
- Conclusion
Are you a beginner in FrontEnd development and looking for a way to create a fully interactive smartphone UI component? Look no further, Tailwind CSS is here to make your life easier. In this article, we will guide you step-by-step on how to create a fully interactive smartphone with Tailwind CSS.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to create responsive and customizable UI components. It helps to minimize the need for custom CSS and makes it easier to create complex UI components with less code.
The Description of Fully Interactive Smartphone UI Component
A fully interactive smartphone UI component is a user interface that simulates the functionality of a smartphone. It includes features like a home screen, app icons, a notification center, and more. With Tailwind CSS, we can create a fully interactive smartphone UI component with ease.
Why Use Tailwind CSS to Create a Fully Interactive Smartphone UI Component?
Tailwind CSS provides a set of pre-defined classes that make it easier to create complex UI components with less code. It also provides responsive design options that allow the UI component to adapt to different screen sizes. This makes it an ideal choice for creating a fully interactive smartphone UI component.
The Preview of Fully Interactive Smartphone UI Component
To create a fully interactive smartphone UI component, we will use Tailwind CSS classes to style the different components of the UI. Here is a preview of what the final UI will look like:
Free download of the Fully interactive smartphone's source code
The Source Code of Fully Interactive Smartphone UI Component
To create a fully interactive smartphone UI component, we will use HTML, CSS, and Tailwind CSS classes. Here is the source code for the 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/tailwindcss@^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 Create a Fully Interactive Smartphone with Tailwind CSS?
Now that we have an idea of what we are going to create, let's dive into the step-by-step process of creating a fully interactive smartphone with Tailwind CSS.
Step 1: Set Up the HTML Structure
The first step is to set up the HTML structure of the UI component. We will create a div with a class of "phone" to contain the entire UI component. Inside the "phone" div, we will create a div with a class of "screen" to contain the screen of the smartphone.
<div class="phone">
<div class="screen">
<!-- Content goes here -->
</div>
</div>
Step 2: Style the Phone and Screen
Next, we will use Tailwind CSS classes to style the "phone" and "screen" divs. We will set the width and height of the "phone" div to 375px and 812px, respectively, to match the size of an iPhone X. We will also set the background color of the "screen" div to white.
<div class="phone w-375 h-812">
<div class="screen bg-white">
<!-- Content goes here -->
</div>
</div>
Step 3: Create the Home Screen
Now, we will create the home screen of the smartphone. We will use a grid layout to display the app icons on the home screen. We will also add a search bar at the top of the screen.
<div class="phone w-375 h-812">
<div class="screen bg-white">
<div class="grid grid-cols-4 gap-4 p-4">
<!-- App icons go here -->
</div>
<div class="p-4">
<input type="text" placeholder="Search" class="w-full rounded-full px-4 py-2 bg-gray-100 focus:bg-white focus:outline-none">
</div>
</div>
</div>
Step 4: Add App Icons
Next, we will add app icons to the home screen. We will use the "flex" and "flex-col" classes to center the app icons vertically and horizontally. We will also use the "text-center" class to center the text below the app icons.
<div class="phone w-375 h-812">
<div class="screen bg-white">
<div class="grid grid-cols-4 gap-4 p-4">
<div class="flex flex-col items-center">
<div class="bg-gray-300 rounded-full p-4">
<i class="fas fa-camera text-white"></i>
</div>
<span class="text-sm mt-2 text-center">Camera</span>
</div>
<!-- More app icons go here -->
</div>
<div class="p-4">
<input type="text" placeholder="Search" class="w-full rounded-full px-4 py-2 bg-gray-100 focus:bg-white focus:outline-none">
</div>
</div>
</div>
Step 5: Add Notification Center
Now, we will add a notification center to the smartphone. We will use the "fixed" and "top-0" classes to position the notification center at the top of the screen. We will also use the "bg-gray-800" and "text-white" classes to style the notification center.
<div class="phone w-375 h-812">
<div class="screen bg-white">
<div class="fixed top-0 w-full bg-gray-800 text-white p-4">
<i class="fas fa-signal"></i>
<span class="ml-2">AT&T</span>
<i class="fas fa-wifi ml-4"></i>
<i class="fas fa-battery-full ml-4"></i>
</div>
<div class="grid grid-cols-4 gap-4 p-4">
<div class="flex flex-col items-center">
<div class="bg-gray-300 rounded-full p-4">
<i class="fas fa-camera text-white"></i>
</div>
<span class="text-sm mt-2 text-center">Camera</span>
</div>
<!-- More app icons go here -->
</div>
<div class="p-4">
<input type="text" placeholder="Search" class="w-full rounded-full px-4 py-2 bg-gray-100 focus:bg-white focus:outline-none">
</div>
</div>
</div>
Step 6: Add App Screens
Finally, we will add screens for the different apps on the smartphone. We will use the "absolute" class to position the app screens on top of the home screen. We will also use the "hidden" class to hide the app screens by default.
<div class="phone w-375 h-812">
<div class="screen bg-white">
<div class="fixed top-0 w-full bg-gray-800 text-white p-4">
<i class="fas fa-signal"></i>
<span class="ml-2">AT&T</span>
<i class="fas fa-wifi ml-4"></i>
<i class="fas fa-battery-full ml-4"></i>
</div>
<div class="grid grid-cols-4 gap-4 p-4">
<div class="flex flex-col items-center">
<div class="bg-gray-300 rounded-full p-4">
<i class="fas fa-camera text-white"></i>
</div>
<span class="text-sm mt-2 text-center">Camera</span>
</div>
<!-- More app icons go here -->
</div>
<div class="p-4">
<input type="text" placeholder="Search" class="w-full rounded-full px-4 py-2 bg-gray-100 focus:bg-white focus:outline-none">
</div>
<div class="absolute top-0 left-0 w-full h-full hidden">
<!-- App screens go here -->
</div>
</div>
</div>
Congratulations! You have successfully created a fully interactive smartphone with Tailwind CSS.
Conclusion
In this article, we have learned how to create a fully interactive smartphone UI component with Tailwind CSS. We have covered the step-by-step process of creating the UI component and provided the source code for reference. With Tailwind CSS, creating complex UI components has never been easier. We hope this article has been helpful and has inspired you to create your own fully interactive UI components with Tailwind CSS.