sindhu/xport-tailwind-alpine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

step 11 : perbaikan slicing dashboard, settings change mb di port status

Browse Source
This commit is contained in:
sindhu
2025-03-08 04:20:45 +07:00
parent 19a07dbc9c
commit 73c430e393
2 changed files with 207 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
v1/dashboard.html
View File

@@ -13,23 +13,49 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
</head> </head>
<body class="bg-[#F2F9FF]"> <body class="bg-[#F2F9FF] h-screen flex flex-col">
<!-- wrapper --> <!-- Navbar -->
<div> <div class="bg-white h-20 flex items-center justify-between px-6">
<!-- navbar phone, tablet and desktop up start --> <!-- Logo -->
<div class="bg-white" x-data="{ open: false }">
<div class="flex justify-between py-5 px-4">
<a class="block text-teal-600" href="#"> <a class="block text-teal-600" href="#">
<span class="sr-only">Home</span>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<img src="../images/logoServer.png" class="mr-3"> <img src="../images/logoServer.png" class="mr-3 h-10" />
<p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p> <p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
</div> </div>
</a> </a>
<!-- menu mobile appear -->
<!-- Navigasi (Desktop) -->
<nav class="hidden lg:flex items-center text-sm gap-6 ml-auto">
<ul class="flex items-center gap-6 text-sm">
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">SETTING</a>
</li>
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ASSAY FORMAT</a>
</li>
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ASSAY CALC</a>
</li>
<li>
<a href="#" class="text-black/87 transition font-bold hover:text-[#2196F3]">ONLINE</a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3" />
</li>
</ul>
</nav>
<!-- Hamburger Menu (Mobile) -->
<div x-data="{ open: false }">
<button @click="open = true" class="block lg:hidden text-[#2196F3] hover:text-gray-600/75">
<span class="material-symbols-outlined text-3xl">menu</span>
</button>
<!-- Bottom Sheet Menu (Mobile) -->
<div> <div>
<!-- Overlay --> <!-- Overlay -->
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false"></div> <div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
</div>
<!-- Modal --> <!-- Modal -->
<div x-show="open" x-transition <div x-show="open" x-transition
@@ -37,15 +63,17 @@
x-bind:class="open ? 'translate-y-0' : 'translate-y-full'"> x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
<ul class="space-y-2"> <ul class="space-y-2">
<li> <li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg"> <a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">settings</span> <span class="material-symbols-outlined text-[#2196F3]">settings</span>
Setting Setting
</div> </div>
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg"> <a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">edit</span> <span class="material-symbols-outlined text-black/87">edit</span>
Assay Format Assay Format
@@ -53,7 +81,8 @@
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg"> <a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">calculate</span> <span class="material-symbols-outlined text-black/87">calculate</span>
Result Result
@@ -61,7 +90,8 @@
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg"> <a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">online_prediction</span> <span class="material-symbols-outlined text-black/87">online_prediction</span>
Status Status
@@ -69,7 +99,8 @@
</a> </a>
</li> </li>
<li> <li>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg"> <a href="#"
class="block px-4 py-2 hover:bg-gray-100 rounded-lg text-black/87 font-medium text-lg">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="material-symbols-outlined text-black/87">person</span> <span class="material-symbols-outlined text-black/87">person</span>
Akun Akun
@@ -79,81 +110,35 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
</div>
<!-- menu mobile appear --> <!-- Konten utama -->
<!-- menu large appear --> <div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen">
<nav aria-label="Global" class="hidden lg:block"> <!-- Bagian Kiri (Logs) -->
<ul class="flex items-center gap-6 text-sm"> <div class="bg-black/87 w-full lg:w-1/2 rounded-lg lg:flex flex-col flex-1 overflow-hidden">
<li> <div class="pl-4 pt-2 lg:pl-6 text-white font-medium text-lg rounded-lg">LOGS</div>
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> SETTING </a>
</li> <!-- LOGS -->
<li> <div class="pb-10 pt-2 pl-2 pr-2 flex-1 overflow-auto h-full lg:pb-0">
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ASSAY FORMAT <!-- Baris 1 -->
</a> <div class="flex flex-wrap lg:flex-nowrap gap-4 items-start mb-5 p-0 lg:p-2">
</li> <h2 class="font-normal text-sm text-white whitespace-nowrap p-2">
<li>
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> RESULT
</a>
</li>
<li>
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ONLINE </a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3">
</li>
</ul>
</nav>
<!-- menu large appear -->
<button @click="open = true"
class="block rounded-sm bg-white text-[#2196F3] transition hover:text-gray-600/75 lg:hidden">
<span class="sr-only">Toggle menu</span>
<svg xmlns="http://www.w3.org/2000/svg" class="size-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
<!-- navbar phone, tablet and desktop up end -->
<!-- content -->
<div class="bg-[#F2F9FF]">
<div class="flex flex-col lg:flex-row px-6 py-5">
<!-- Kiri -->
<div class="flex w-full lg:w-1/2 mr-0 lg:mr-5">
<div class="flex flex-col w-full">
<div class="bg-black/87 h-[385px] flex flex-col">
<div class="bg-black/87 p-2 text-white font-medium text-lg">LOGS</div>
<div class="overflow-y-auto flex-1 p-2 bg-black/87">
<div class="space-y-4">
<div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start">
<h2 class="font-normal text-sm text-white whitespace-nowrap">
2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span> 2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
</h2> </h2>
<p class="font-normal text-sm text-white w-full text-justify"> <p class="font-normal text-sm text-white w-full lg:flex-1 text-justify pl-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
doloremque, quisquam architecto possimus odio accusamus... doloremque, quisquam architecto possimus odio accusamus...
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
perspiciatis error doloremque, quisquam architecto possimus odio accusamus... perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
</p> </p>
</div> </div>
<!-- 2 --> <!-- Baris 2 -->
<div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start"> <div class="mb-0 flex flex-wrap lg:flex-nowrap gap-4 items-start lg:mb-5 p-2">
<h2 class="font-normal text-sm text-white whitespace-nowrap"> <h2 class="font-normal text-sm text-white whitespace-nowrap p-2">
2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span> 2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
</h2> </h2>
<p class="font-normal text-sm text-white w-full text-justify"> <p class="font-normal text-sm text-white w-full lg:flex-1 text-justify pl-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
doloremque, quisquam architecto possimus odio accusamus...
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
perspiciatis error doloremque, quisquam architecto possimus odio accusamus...
</p>
</div>
<!-- 3 -->
<div class="grid lg:grid-cols-[auto_1fr] gap-2 items-start">
<h2 class="font-normal text-sm text-white whitespace-nowrap">
2025-03-02 08:00:00 <span class="text-[#20DC49] font-normal text-sm">[Port1]</span>
</h2>
<p class="font-normal text-sm text-white w-full text-justify">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit perspiciatis error
doloremque, quisquam architecto possimus odio accusamus... doloremque, quisquam architecto possimus odio accusamus...
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam velit
@@ -162,14 +147,11 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> <!-- Bagian Kanan (PORT STATUS) -->
</div> <div class="w-full lg:w-1/2 rounded-lg flex flex-col flex-1 overflow-auto">
<!-- Kanan --> <div class="flex flex-row">
<div class="flex w-full lg:w-1/2 mt-5 lg:mt-0"> <div class="flex flex-col w-full lg:flex-row mb-5">
<div class="flex flex-col w-full">
<div class="h-[385px] bg-[#F2F9FF] overflow-y-scroll">
<div class="flex flex-col lg:flex-row mb-5">
<!-- 1 --> <!-- 1 -->
<div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative"> <div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
<div class="flex justify-between"> <div class="flex justify-between">
@@ -177,14 +159,13 @@
<div class="relative flex h-4 w-4"> <div class="relative flex h-4 w-4">
<span <span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span> class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span <span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div> </div>
</div> </div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 0</p> <p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p> <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p> <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p> <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div> </div>
<!-- 2 --> <!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative"> <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
@@ -193,90 +174,52 @@
<div class="relative flex h-4 w-4"> <div class="relative flex h-4 w-4">
<span <span
class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span> class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
<span <span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div> </div>
</div> </div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 1</p> <p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p> <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p> <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p> <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div> </div>
</div> </div>
<!-- 3 --> </div>
<div class="flex flex-col lg:flex-row mb-5"> <div class="flex flex-row">
<div class="bg-white rounded-md mr-0 mb-5 lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative"> <div class="flex flex-col w-full lg:flex-row mb-5">
<!-- 1 -->
<div class="bg-white mr-0 mb-5 rounded-md lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
<div class="flex justify-between"> <div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2> <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4"> <div class="relative flex h-4 w-4">
<span <span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span> class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span <span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div> </div>
</div> </div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 2</p> <p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p> <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p> <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p> <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div> </div>
<!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative"> <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
<div class="flex justify-between"> <div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2> <h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4"> <div class="relative flex h-4 w-4">
<span <span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span> class="absolute inline-flex h-full w-full rounded-full bg-[#E10A0A] opacity-75"></span>
<span <span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div> </div>
</div> </div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 3</p> <p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p> <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p> <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p> <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
<!-- 4 -->
<div class="flex flex-col lg:flex-row mb-5">
<div class="bg-white rounded-md mr-0 mb-5 lg:mr-5 p-2 w-full lg:w-1/2 lg:mb-0 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span
class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 2</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p>
</div>
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
<div class="flex justify-between">
<h2 class="text-black/87 font-medium text-xl mb-4">PORT STATUS</h2>
<div class="relative flex h-4 w-4">
<span
class="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#1CCFB1] opacity-75"></span>
<span
class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 3</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p>
</div> </div>
</div> </div>
</div> </div>
</div>s
</div> </div>
</div>
</div>
</div>
<!-- content -->
</div>
<!-- wrapper -->
</body> </body>
</html> </html>

32
v1/settings.html
View File

@@ -170,10 +170,10 @@
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span> <span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div> </div>
</div> </div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 0</p> <p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p> <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p> <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p> <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div> </div>
<!-- 2 --> <!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative"> <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
@@ -185,10 +185,10 @@
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span> <span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div> </div>
</div> </div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 1</p> <p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p> <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p> <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p> <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div> </div>
</div> </div>
</div> </div>
@@ -204,10 +204,10 @@
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span> <span class="relative inline-flex h-4 w-4 rounded-full bg-[#1CCFB1] "></span>
</div> </div>
</div> </div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 0</p> <p class="text-[#00000099] font-normal text-sm mb-2">Port 0</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p> <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p> <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p> <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div> </div>
<!-- 2 --> <!-- 2 -->
<div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative"> <div class="bg-white rounded-md p-2 w-full lg:w-1/2 relative">
@@ -219,10 +219,10 @@
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span> <span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div> </div>
</div> </div>
<p class="text-[#00000099] font-normal text-sm mb-3">Port 1</p> <p class="text-[#00000099] font-normal text-sm mb-2">Port 1</p>
<p class="text-[#00000099] font-normal text-sm mb-3">TCP (192 168.0.1 : 2000)</p> <p class="text-[#00000099] font-normal text-sm mb-2">TCP (192 168.0.1 : 2000)</p>
<p class="text-[#00000099] font-normal text-sm mb-3">Offline</p> <p class="text-[#00000099] font-normal text-sm mb-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p> <p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div> </div>
</div> </div>
</div> </div>