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

439
v1/dashboard.html
View File

@@ -13,270 +13,213 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
</head>
<body class="bg-[#F2F9FF]">
<!-- wrapper -->
<div>
<!-- navbar phone, tablet and desktop up start -->
<div class="bg-white" x-data="{ open: false }">
<div class="flex justify-between py-5 px-4">
<a class="block text-teal-600" href="#">
<span class="sr-only">Home</span>
<div class="flex items-center space-x-2">
<img src="../images/logoServer.png" class="mr-3">
<p class="lg:text-lg xl:text-xl text-[#2196F3] font-normal">Port Server</p>
</div>
</a>
<!-- menu mobile appear -->
<div>
<!-- Overlay -->
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false"></div>
<!-- Modal -->
<div x-show="open" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
<ul class="space-y-2">
<li>
<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">
<span class="material-symbols-outlined text-black/87">settings</span>
Setting
</div>
</a>
</li>
<li>
<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">
<span class="material-symbols-outlined text-black/87">edit</span>
Assay Format
</div>
</a>
</li>
<li>
<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">
<span class="material-symbols-outlined text-black/87">calculate</span>
Result
</div>
</a>
</li>
<li>
<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">
<span class="material-symbols-outlined text-black/87">online_prediction</span>
Status
</div>
</a>
</li>
<li>
<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">
<span class="material-symbols-outlined text-black/87">person</span>
Akun
</div>
</a>
</li>
</ul>
</div>
<body class="bg-[#F2F9FF] h-screen flex flex-col">
<!-- Navbar -->
<div class="bg-white h-20 flex items-center justify-between px-6">
<!-- Logo -->
<a class="block text-teal-600" href="#">
<div class="flex items-center space-x-2">
<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>
</div>
</a>
<!-- 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>
<!-- Overlay -->
<div x-show="open" class="fixed inset-0 bg-black/50 transition-opacity z-50" @click="open = false">
</div>
<!-- menu mobile appear -->
<!-- menu large appear -->
<nav aria-label="Global" class="hidden lg:block">
<ul class="flex items-center gap-6 text-sm">
<!-- Modal -->
<div x-show="open" x-transition
class="fixed bottom-0 left-0 w-full bg-white p-6 rounded-t-[32px] shadow-lg transform transition-transform duration-300 ease-in-out z-50"
x-bind:class="open ? 'translate-y-0' : 'translate-y-full'">
<ul class="space-y-2">
<li>
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> SETTING </a>
</li>
<li>
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ASSAY FORMAT
<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">
<span class="material-symbols-outlined text-[#2196F3]">settings</span>
Setting
</div>
</a>
</li>
<li>
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> RESULT
<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">
<span class="material-symbols-outlined text-black/87">edit</span>
Assay Format
</div>
</a>
</li>
<li>
<a class="text-black/87 font-bold transition hover:text-[#2196F3]" href="#"> ONLINE </a>
<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">
<span class="material-symbols-outlined text-black/87">calculate</span>
Result
</div>
</a>
</li>
<li>
<img src="../images/avatar.png" class="mr-3">
<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">
<span class="material-symbols-outlined text-black/87">online_prediction</span>
Status
</div>
</a>
</li>
<li>
<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">
<span class="material-symbols-outlined text-black/87">person</span>
Akun
</div>
</a>
</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>
</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
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>
<!-- 2 -->
<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
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
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>
</div>
</div>
</div>
</div>
</div>
<!-- Kanan -->
<div class="flex w-full lg:w-1/2 mt-5 lg:mt-0">
<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 -->
<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">
<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 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-3">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p>
</div>
<!-- 2 -->
<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 rounded-full bg-[#E10A0A] opacity-75"></span>
<span
class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-3">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-3">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p>
</div>
</div>
<!-- 3 -->
<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>
<!-- 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>
<!-- content -->
</div>
<!-- wrapper -->
<!-- Konten utama -->
<div class="flex-1 flex flex-col lg:flex-row p-6 gap-5 overflow-hidden h-screen">
<!-- Bagian Kiri (Logs) -->
<div class="bg-black/87 w-full lg:w-1/2 rounded-lg lg:flex flex-col flex-1 overflow-hidden">
<div class="pl-4 pt-2 lg:pl-6 text-white font-medium text-lg rounded-lg">LOGS</div>
<!-- LOGS -->
<div class="pb-10 pt-2 pl-2 pr-2 flex-1 overflow-auto h-full lg:pb-0">
<!-- Baris 1 -->
<div class="flex flex-wrap lg:flex-nowrap gap-4 items-start mb-5 p-0 lg:p-2">
<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>
</h2>
<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>
<!-- Baris 2 -->
<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 p-2">
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 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>
</div>
</div>
<!-- Bagian Kanan (PORT STATUS) -->
<div class="w-full lg:w-1/2 rounded-lg flex flex-col flex-1 overflow-auto">
<div class="flex flex-row">
<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">
<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-2">Port 0</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-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<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 rounded-full bg-[#E10A0A] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</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-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
<div class="flex flex-row">
<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">
<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-2">Port 0</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-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<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 rounded-full bg-[#E10A0A] opacity-75"></span>
<span class="relative inline-flex h-4 w-4 rounded-full bg-[#E10A0A] "></span>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</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-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
</div>s
</div>
</body>
</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>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-3">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-3">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 0</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-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<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>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-3">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-3">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</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-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>
@@ -204,10 +204,10 @@
<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 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-3">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 0</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-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
<!-- 2 -->
<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>
</div>
</div>
<p class="text-[#00000099] font-normal text-sm mb-3">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-3">Offline</p>
<p class="text-[#00000099] font-normal text-sm">XN5000</p>
<p class="text-[#00000099] font-normal text-sm mb-2">Port 1</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-2">Offline</p>
<p class="text-[#00000099] font-normal text-sm mb-2">XN5000</p>
</div>
</div>
</div>