Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-08 22:53:24 +00:00
Code Issues Projects Releases Wiki Activity

Add All new components

Browse Source
This commit is contained in:
khatabwedaa
2023-07-20 22:31:05 +03:00
parent bcc934b556
commit a58dedbe56
100 changed files with 4653 additions and 1105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/inputs/AddOn.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="domain name" class="block text-sm text-gray-500 dark:text-gray-300">Domain Name</label>
<div class="flex items-center mt-2">
<p class="py-2.5 px-3 text-gray-500 bg-gray-100 dark:bg-gray-800 dark:border-gray-700 border border-r-0 rtl:rounded-r-lg rtl:rounded-l-none rtl:border-l-0 rtl:border-r rounded-l-lg">http://</p>
<input type="text" placeholder="merakiui.com" class="block w-full rounded-l-none rtl:rounded-l-lg rtl:rounded-r-none placeholder-gray-400/70 dark:placeholder-gray-500 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-gray-700 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-blue-300" />
</div>
</div>
</body>
</html>

32
components/inputs/CardNumber.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="card" class="block text-sm text-gray-500 dark:text-gray-300">Card Number</label>
<div class="relative flex items-center mt-2">
<span class="absolute">
<svg class="mx-3" width="23" height="14" viewBox="0 0 23 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.179 11.8294C9.99493 12.8275 8.45902 13.43 6.78069 13.43C3.03582 13.43 0 10.4303 0 6.72997C0 3.02966 3.03582 0.0299683 6.78069 0.0299683C8.45902 0.0299683 9.99493 0.632466 11.179 1.63051C12.363 0.632466 13.8989 0.0299683 15.5773 0.0299683C19.3221 0.0299683 22.358 3.02966 22.358 6.72997C22.358 10.4303 19.3221 13.43 15.5773 13.43C13.8989 13.43 12.363 12.8275 11.179 11.8294Z" fill="#ED0006"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1792 11.8294C12.6371 10.6005 13.5616 8.77192 13.5616 6.72997C13.5616 4.68801 12.6371 2.85941 11.1792 1.63051C12.3632 0.632465 13.8992 0.0299683 15.5775 0.0299683C19.3224 0.0299683 22.3582 3.02966 22.3582 6.72997C22.3582 10.4303 19.3224 13.43 15.5775 13.43C13.8992 13.43 12.3632 12.8275 11.1792 11.8294Z" fill="#F9A000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1788 11.8294C12.6367 10.6005 13.5611 8.77193 13.5611 6.72999C13.5611 4.68805 12.6367 2.85946 11.1788 1.63055C9.72084 2.85946 8.79639 4.68805 8.79639 6.72999C8.79639 8.77193 9.72084 10.6005 11.1788 11.8294Z" fill="#FF5E00"/>
</svg>
</span>
<input type="text" placeholder="5555555555554444" class="block w-full py-2.5 text-gray-700 placeholder-gray-400/70 bg-white border border-gray-200 rounded-lg pl-11 pr-5 rtl:pr-11 rtl:pl-5 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
</div>
</div>
</body>
</html>

31
components/inputs/CustomFile.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="file" class="block text-sm text-gray-500 dark:text-gray-300">File</label>
<label for="dropzone-file" class="flex flex-col items-center w-full max-w-lg p-5 mx-auto mt-2 text-center bg-white border-2 border-gray-300 border-dashed cursor-pointer dark:bg-gray-900 dark:border-gray-700 rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-gray-500 dark:text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
</svg>
<h2 class="mt-1 font-medium tracking-wide text-gray-700 dark:text-gray-200">Payment File</h2>
<p class="mt-2 text-xs tracking-wide text-gray-500 dark:text-gray-400">Upload or darg & drop your file SVG, PNG, JPG or GIF. </p>
<input id="dropzone-file" type="file" class="hidden" />
</label>
</div>
</body>
</html>

21
components/inputs/Date.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="Birthday" class="block text-sm text-gray-500 dark:text-gray-300">Birthday</label>
<input type="date" placeholder="John Doe" class="block mt-2 w-full placeholder-gray-400/70 dark:placeholder-gray-500 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-gray-700 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-blue-300" />
</div>
</body>
</html>

21
components/inputs/Disabled.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="username" class="block text-sm text-gray-500 dark:text-gray-300">Username</label>
<input disabled type="text" placeholder="John Doe" class="block bg-gray-50 cursor-not-allowed mt-2 w-full placeholder-gray-400/70 dark:placeholder-gray-500 rounded-lg border border-gray-200 px-5 py-2.5 text-gray-700 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-blue-300" />
</div>
</body>
</html>

29
components/inputs/EmailWithIcon.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="email" class="block text-sm text-gray-500 dark:text-gray-300">Email Address</label>
<div class="relative flex items-center mt-2">
<span class="absolute">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 mx-3 text-gray-400 dark:text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</span>
<input type="email" placeholder="john@example.com" class="block w-full py-2.5 text-gray-700 placeholder-gray-400/70 bg-white border border-gray-200 rounded-lg pl-11 pr-5 rtl:pr-11 rtl:pl-5 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
</div>
</div>
</body>
</html>

23
components/inputs/EmailWithMessage.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="email" class="block text-sm text-gray-500 dark:text-gray-300">Email Address</label>
<input type="email" placeholder="john@example.com" class="mt-2 block w-full placeholder-gray-400/70 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-gray-700 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-blue-300" />
<p class="mt-3 text-xs text-gray-400 dark:text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</body>
</html>

23
components/inputs/ErrorWithMessage.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="username" class="block text-sm text-gray-500 dark:text-gray-300">Username</label>
<input type="text" placeholder="John Doe" class="block mt-2 w-full placeholder-gray-400/70 dark:placeholder-gray-500 rounded-lg border border-red-400 bg-white px-5 py-2.5 text-gray-700 focus:border-red-400 focus:outline-none focus:ring focus:ring-red-300 focus:ring-opacity-40 dark:border-red-400 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-red-300" />
<p class="mt-3 text-xs text-red-400">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</body>
</html>

21
components/inputs/File.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="image" class="block text-sm text-gray-500 dark:text-gray-300">Image</label>
<input type="file" class="block w-full px-3 py-2 mt-2 text-sm text-gray-600 bg-white border border-gray-200 rounded-lg file:bg-gray-200 file:text-gray-700 file:text-sm file:px-4 file:py-1 file:border-none file:rounded-full dark:file:bg-gray-800 dark:file:text-gray-200 dark:text-gray-300 placeholder-gray-400/70 dark:placeholder-gray-500 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:focus:border-blue-300" />
</div>
</body>
</html>

33
components/inputs/PasswordWithShowIcon.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<div class="flex items-center justify-between">
<label for="password" class="block text-sm text-gray-500 dark:text-gray-300">Password</label>
<a href="#" class="text-xs text-gray-600 hover:underline dark:text-gray-400">Forget Password?</a>
</div>
<div class="relative flex items-center mt-2">
<button class="absolute right-0 focus:outline-none rtl:left-0 rtl:right-auto">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 mx-4 text-gray-400 transition-colors duration-300 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400">
<path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
<path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" />
</svg>
</button>
<input type="password" placeholder="********" class="block w-full py-2.5 text-gray-700 placeholder-gray-400/70 bg-white border border-gray-200 rounded-lg pl-5 pr-11 rtl:pr-5 rtl:pl-11 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 dark:focus:border-blue-300 focus:ring-blue-300 focus:outline-none focus:ring focus:ring-opacity-40">
</div>
</div>
</body>
</html>

21
components/inputs/Simple.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="username" class="block text-sm text-gray-500 dark:text-gray-300">Username</label>
<input type="text" placeholder="John Doe" class="block mt-2 w-full placeholder-gray-400/70 dark:placeholder-gray-500 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-gray-700 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-blue-300" />
</div>
</body>
</html>

21
components/inputs/Textarea.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="Description" class="block text-sm text-gray-500 dark:text-gray-300">Description</label>
<textarea placeholder="lorem..." class="block mt-2 w-full placeholder-gray-400/70 dark:placeholder-gray-500 rounded-lg border border-gray-200 bg-white px-4 h-32 py-2.5 text-gray-700 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-blue-300"></textarea>
</div>
</body>
</html>

23
components/inputs/TextareaWithMessage.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<label for="Description" class="block text-sm text-gray-500 dark:text-gray-300">Description</label>
<textarea placeholder="lorem..." class="block mt-2 w-full placeholder-gray-400/70 dark:placeholder-gray-500 rounded-lg border border-gray-200 bg-white px-4 h-32 py-2.5 text-gray-700 focus:border-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-40 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-blue-300"></textarea>
<p class="mt-3 text-xs text-gray-400 dark:text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</body>
</html>