From 57d3b80afbe0b595a77b8b1fdb543a93b503487f Mon Sep 17 00:00:00 2001
From: unknown <matifandy@gmail.com>
Date: Tue, 12 Dec 2023 13:30:19 -0300
Subject: [PATCH] feat: Add Dropdown Menu (select) #2

---
 dist/index.css                     | 23 +++++++++++++++++++++++
 dist/index.min.css                 |  2 +-
 docs/index.html                    | 30 ++++++++++++++++++++++++++----
 package.json                       |  2 +-
 src/scss/components/_dropdown.scss | 29 +++++++++++++++++++++++++++++
 src/scss/index.scss                |  1 +
 6 files changed, 81 insertions(+), 6 deletions(-)
 create mode 100644 src/scss/components/_dropdown.scss

diff --git a/dist/index.css b/dist/index.css
index d69ae93..f240205 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -827,3 +827,26 @@ input.nb-checkbox {
 .accordion-tab:checked ~ .accordion-content {
   max-height: 100vh;
   padding: 1em; }
+
+.dropdown {
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 2px 2px 0px black;
+  border: 1px solid black;
+  padding: 10px;
+  cursor: pointer; }
+  .dropdown::after {
+    content: '\25BC';
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%); }
+  .dropdown option {
+    background-color: #fff;
+    color: #333;
+    box-shadow: 2px 2px 0px black;
+    border: 1px solid black;
+    padding: 10px; }
+  .dropdown:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
diff --git a/dist/index.min.css b/dist/index.min.css
index 4e1ce25..b254108 100644
--- a/dist/index.min.css
+++ b/dist/index.min.css
@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}html{font-family:Arial, sans-serif}.nb-button.default{display:inline-block;padding:10px 20px;background-color:#fff;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.default:hover{box-shadow:3px 3px 0px #000000;background-color:#aaa}.nb-button.default:focus{outline-color:transparent}.nb-button.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.orange{display:inline-block;padding:10px 20px;background-color:#ff5733;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.orange:hover{box-shadow:3px 3px 0px #000000;background-color:#d64b2b}.nb-button.orange:focus{outline-color:transparent}.nb-button.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.blue{display:inline-block;padding:10px 20px;background-color:#0077b6;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.blue:hover{box-shadow:3px 3px 0px #000000;background-color:#005785}.nb-button.blue:focus{outline-color:transparent}.nb-button.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.green{display:inline-block;padding:10px 20px;background-color:#40d39c;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.green:hover{box-shadow:3px 3px 0px #000000;background-color:#30ac7e}.nb-button.green:focus{outline-color:transparent}.nb-button.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.sky-blue{display:inline-block;padding:10px 20px;background-color:#b9e2f8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.sky-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#91bed6}.nb-button.sky-blue:focus{outline-color:transparent}.nb-button.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-red{display:inline-block;padding:10px 20px;background-color:#ffc5c8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-red:hover{box-shadow:3px 3px 0px #000000;background-color:#ffb2b2}.nb-button.pale-red:focus{outline-color:transparent}.nb-button.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-violet{display:inline-block;padding:10px 20px;background-color:#bc98cb;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-violet:hover{box-shadow:3px 3px 0px #000000;background-color:#b482c9}.nb-button.pale-violet:focus{outline-color:transparent}.nb-button.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.soft-blue{display:inline-block;padding:10px 20px;background-color:#4799ae;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.soft-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#378589}.nb-button.soft-blue:focus{outline-color:transparent}.nb-button.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-cyan{display:inline-block;padding:10px 20px;background-color:#b9e7de;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-cyan:hover{box-shadow:3px 3px 0px #000000;background-color:#a0e5d7}.nb-button.pale-cyan:focus{outline-color:transparent}.nb-button.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-yellow{display:inline-block;padding:10px 20px;background-color:#fdfd96;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-yellow:hover{box-shadow:3px 3px 0px #000000;background-color:#fcfc7e}.nb-button.pale-yellow:focus{outline-color:transparent}.nb-button.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.rounded{border-radius:9999px}.nb-input.default{padding:10px;background-color:#fff;color:#000;border:2px solid #ccc;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.default:hover{background-color:#aaa}.nb-input.default:focus{outline-color:transparent;border-color:#aaa}.nb-input.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.default::placeholder{color:#000;opacity:1;text-align:left}.nb-input.orange{padding:10px;background-color:#ff5733;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.orange:hover{background-color:#d64b2b}.nb-input.orange:focus{outline-color:transparent;border-color:#d64b2b}.nb-input.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.orange::placeholder{color:#000;opacity:1;text-align:left}.nb-input.blue{padding:10px;background-color:#0077b6;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.blue:hover{background-color:#005785}.nb-input.blue:focus{outline-color:transparent;border-color:#005785}.nb-input.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.green{padding:10px;background-color:#40d39c;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.green:hover{background-color:#30ac7e}.nb-input.green:focus{outline-color:transparent;border-color:#30ac7e}.nb-input.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.green::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.sky-blue{padding:10px;background-color:#b9e2f8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.sky-blue:hover{background-color:#91bed6}.nb-input.sky-blue:focus{outline-color:transparent;border-color:#91bed6}.nb-input.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.sky-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-red{padding:10px;background-color:#ffc5c8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-red:hover{background-color:#ffb2b2}.nb-input.pale-red:focus{outline-color:transparent;border-color:#ffb2b2}.nb-input.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-red::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-violet{padding:10px;background-color:#bc98cb;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-violet:hover{background-color:#b482c9}.nb-input.pale-violet:focus{outline-color:transparent;border-color:#b482c9}.nb-input.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-violet::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.soft-blue{padding:10px;background-color:#4799ae;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.soft-blue:hover{background-color:#378589}.nb-input.soft-blue:focus{outline-color:transparent;border-color:#378589}.nb-input.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.soft-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-cyan{padding:10px;background-color:#b9e7de;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-cyan:hover{background-color:#a0e5d7}.nb-input.pale-cyan:focus{outline-color:transparent;border-color:#a0e5d7}.nb-input.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-cyan::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-yellow{padding:10px;background-color:#fdfd96;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-yellow:hover{background-color:#fcfc7e}.nb-input.pale-yellow:focus{outline-color:transparent;border-color:#fcfc7e}.nb-input.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-yellow::placeholder{color:#000;opacity:1;text-align:left}.text-orange{color:#ff5733}.text-blue{color:#0077b6}.text-green{color:#40d39c}.text-sky-blue{color:#b9e2f8}.text-pale-red{color:#ffc5c8}.text-pale-violet{color:#bc98cb}.text-soft-blue{color:#4799ae}.text-pale-cyan{color:#b9e7de}.text-pale-yellow{color:#fdfd96}.bg-orange{background-color:#ff5733}.bg-blue{background-color:#0077b6}.bg-green{background-color:#40d39c}.bg-sky-blue{background-color:#b9e2f8}.bg-pale-red{background-color:#ffc5c8}.bg-pale-violet{background-color:#bc98cb}.bg-soft-blue{background-color:#4799ae}.bg-pale-cyan{background-color:#b9e7de}.bg-pale-yellow{background-color:#fdfd96}.dialog{background:#fff;border-radius:20px;filter:drop-shadow(4px 4px 0px #000);padding:20px;border:3px solid #000;width:20rem}.dialog p{font-size:18px}.button-container{display:flex;text-align:right}.marquee{width:100%;overflow:hidden;white-space:nowrap;border:2px solid black;font-weight:bold;position:relative}.marquee .marquee-content{animation:marquee 10s linear infinite}.marquee .marquee-content span{display:inline-block;padding:0 20px;font-size:24px}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.card{width:300px;margin:20px;border-radius:8px;overflow:hidden;border:3px solid #000;box-shadow:-3px 3px 0px #000000;transition:box-shadow 0.2s ease, transform 0.2s ease}.card:hover{box-shadow:0px 0px 0px #000000;transform:translate(-6px, 6px)}.card a{margin:0;text-decoration:none;color:inherit}.card-thumbnail img{width:100%;height:auto}.card-content{padding:16px}.text-small{font-size:14px;color:#888}.card-content div{font-size:16px;line-height:1.5;color:#333}.card-content strong{cursor:pointer}.avatar{overflow:hidden;width:67px;height:67px;display:flex;justify-content:center;align-items:center;border:2px solid #000;border-radius:50%;box-shadow:2px 2px 0 0 #031926}.avatar img{border:0;max-width:100%;vertical-align:middle;display:inline-block}.nb-label{cursor:pointer;display:flex;align-items:center;font-family:"Public Sans", sans-serif;font-size:1rem;color:black;text-transform:uppercase}input.nb-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background-color:#fff;border:2px solid black;border-radius:4px;cursor:pointer}input.nb-checkbox:checked{background-color:#007bff;color:#fff}input.nb-checkbox:checked::before{content:"x";font-weight:bold;color:inherit;left:5px;position:relative;top:0px;font-size:18px;text-align:center}.badge{width:fit-content;padding:5px;border:2px solid #000;border-radius:50px;background-color:#40d39c;box-shadow:3px 3px 0 0 #000}.badge .badge-inner{display:flex;height:100%;margin:0;justify-content:center;align-items:center;border:2px solid #000;border-radius:50px}.badge .badge-inner .badge-text{color:#031926;padding:10px;margin:0}#modal{display:none}#modal:checked ~ .modal,#modal:checked ~ .modal-background{display:block}.modal-background{width:100%;height:100%;background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;display:none;z-index:9998}.modal{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;display:none;width:300px;height:300px;background-color:#fff;box-sizing:border-box;z-index:9999}.modal>p{padding:15px;margin:0}.modal-header{background-color:#f9f9f9;border-bottom:1px solid #dddddd;box-sizing:border-box;height:50px}.modal-header h3{margin:0;box-sizing:border-box;padding-left:15px;line-height:50px;color:#4d4d4d;font-size:16px;display:inline-block}.modal-header label{box-sizing:border-box;border-left:1px solid #dddddd;float:right;line-height:50px;padding:0 15px 0 15px;cursor:pointer}.modal-header label:hover img{opacity:0.6}.alert.success{background-color:#92fca2;border:1px solid #40d39c;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.error{background-color:#ffc5c8;border:1px solid #dc341e;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.warning{background-color:#f8f894;border:1px solid #fdfd96;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.info{background-color:#d5f0ff;border:1px solid #b9e2f8;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.accordion-tab{position:absolute;opacity:0;z-index:-1}.accordion{border-radius:5px;overflow:hidden;box-shadow:2px 2px 0px black;border:1px solid black}.accordion-label{display:flex;padding:1em;font-weight:bold;cursor:pointer;color:#fff}.accordion-content{max-height:0;padding:0 1em;background:white;transition:all 0.35s}.accordion-tab:checked ~ .accordion-content{max-height:100vh;padding:1em}
+*,*::before,*::after{box-sizing:border-box}html{font-family:Arial, sans-serif}.nb-button.default{display:inline-block;padding:10px 20px;background-color:#fff;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.default:hover{box-shadow:3px 3px 0px #000000;background-color:#aaa}.nb-button.default:focus{outline-color:transparent}.nb-button.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.orange{display:inline-block;padding:10px 20px;background-color:#ff5733;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.orange:hover{box-shadow:3px 3px 0px #000000;background-color:#d64b2b}.nb-button.orange:focus{outline-color:transparent}.nb-button.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.blue{display:inline-block;padding:10px 20px;background-color:#0077b6;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.blue:hover{box-shadow:3px 3px 0px #000000;background-color:#005785}.nb-button.blue:focus{outline-color:transparent}.nb-button.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.green{display:inline-block;padding:10px 20px;background-color:#40d39c;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.green:hover{box-shadow:3px 3px 0px #000000;background-color:#30ac7e}.nb-button.green:focus{outline-color:transparent}.nb-button.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.sky-blue{display:inline-block;padding:10px 20px;background-color:#b9e2f8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.sky-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#91bed6}.nb-button.sky-blue:focus{outline-color:transparent}.nb-button.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-red{display:inline-block;padding:10px 20px;background-color:#ffc5c8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-red:hover{box-shadow:3px 3px 0px #000000;background-color:#ffb2b2}.nb-button.pale-red:focus{outline-color:transparent}.nb-button.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-violet{display:inline-block;padding:10px 20px;background-color:#bc98cb;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-violet:hover{box-shadow:3px 3px 0px #000000;background-color:#b482c9}.nb-button.pale-violet:focus{outline-color:transparent}.nb-button.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.soft-blue{display:inline-block;padding:10px 20px;background-color:#4799ae;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.soft-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#378589}.nb-button.soft-blue:focus{outline-color:transparent}.nb-button.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-cyan{display:inline-block;padding:10px 20px;background-color:#b9e7de;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-cyan:hover{box-shadow:3px 3px 0px #000000;background-color:#a0e5d7}.nb-button.pale-cyan:focus{outline-color:transparent}.nb-button.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-yellow{display:inline-block;padding:10px 20px;background-color:#fdfd96;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-yellow:hover{box-shadow:3px 3px 0px #000000;background-color:#fcfc7e}.nb-button.pale-yellow:focus{outline-color:transparent}.nb-button.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.rounded{border-radius:9999px}.nb-input.default{padding:10px;background-color:#fff;color:#000;border:2px solid #ccc;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.default:hover{background-color:#aaa}.nb-input.default:focus{outline-color:transparent;border-color:#aaa}.nb-input.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.default::placeholder{color:#000;opacity:1;text-align:left}.nb-input.orange{padding:10px;background-color:#ff5733;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.orange:hover{background-color:#d64b2b}.nb-input.orange:focus{outline-color:transparent;border-color:#d64b2b}.nb-input.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.orange::placeholder{color:#000;opacity:1;text-align:left}.nb-input.blue{padding:10px;background-color:#0077b6;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.blue:hover{background-color:#005785}.nb-input.blue:focus{outline-color:transparent;border-color:#005785}.nb-input.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.green{padding:10px;background-color:#40d39c;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.green:hover{background-color:#30ac7e}.nb-input.green:focus{outline-color:transparent;border-color:#30ac7e}.nb-input.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.green::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.sky-blue{padding:10px;background-color:#b9e2f8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.sky-blue:hover{background-color:#91bed6}.nb-input.sky-blue:focus{outline-color:transparent;border-color:#91bed6}.nb-input.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.sky-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-red{padding:10px;background-color:#ffc5c8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-red:hover{background-color:#ffb2b2}.nb-input.pale-red:focus{outline-color:transparent;border-color:#ffb2b2}.nb-input.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-red::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-violet{padding:10px;background-color:#bc98cb;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-violet:hover{background-color:#b482c9}.nb-input.pale-violet:focus{outline-color:transparent;border-color:#b482c9}.nb-input.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-violet::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.soft-blue{padding:10px;background-color:#4799ae;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.soft-blue:hover{background-color:#378589}.nb-input.soft-blue:focus{outline-color:transparent;border-color:#378589}.nb-input.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.soft-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-cyan{padding:10px;background-color:#b9e7de;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-cyan:hover{background-color:#a0e5d7}.nb-input.pale-cyan:focus{outline-color:transparent;border-color:#a0e5d7}.nb-input.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-cyan::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-yellow{padding:10px;background-color:#fdfd96;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-yellow:hover{background-color:#fcfc7e}.nb-input.pale-yellow:focus{outline-color:transparent;border-color:#fcfc7e}.nb-input.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-yellow::placeholder{color:#000;opacity:1;text-align:left}.text-orange{color:#ff5733}.text-blue{color:#0077b6}.text-green{color:#40d39c}.text-sky-blue{color:#b9e2f8}.text-pale-red{color:#ffc5c8}.text-pale-violet{color:#bc98cb}.text-soft-blue{color:#4799ae}.text-pale-cyan{color:#b9e7de}.text-pale-yellow{color:#fdfd96}.bg-orange{background-color:#ff5733}.bg-blue{background-color:#0077b6}.bg-green{background-color:#40d39c}.bg-sky-blue{background-color:#b9e2f8}.bg-pale-red{background-color:#ffc5c8}.bg-pale-violet{background-color:#bc98cb}.bg-soft-blue{background-color:#4799ae}.bg-pale-cyan{background-color:#b9e7de}.bg-pale-yellow{background-color:#fdfd96}.dialog{background:#fff;border-radius:20px;filter:drop-shadow(4px 4px 0px #000);padding:20px;border:3px solid #000;width:20rem}.dialog p{font-size:18px}.button-container{display:flex;text-align:right}.marquee{width:100%;overflow:hidden;white-space:nowrap;border:2px solid black;font-weight:bold;position:relative}.marquee .marquee-content{animation:marquee 10s linear infinite}.marquee .marquee-content span{display:inline-block;padding:0 20px;font-size:24px}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.card{width:300px;margin:20px;border-radius:8px;overflow:hidden;border:3px solid #000;box-shadow:-3px 3px 0px #000000;transition:box-shadow 0.2s ease, transform 0.2s ease}.card:hover{box-shadow:0px 0px 0px #000000;transform:translate(-6px, 6px)}.card a{margin:0;text-decoration:none;color:inherit}.card-thumbnail img{width:100%;height:auto}.card-content{padding:16px}.text-small{font-size:14px;color:#888}.card-content div{font-size:16px;line-height:1.5;color:#333}.card-content strong{cursor:pointer}.avatar{overflow:hidden;width:67px;height:67px;display:flex;justify-content:center;align-items:center;border:2px solid #000;border-radius:50%;box-shadow:2px 2px 0 0 #031926}.avatar img{border:0;max-width:100%;vertical-align:middle;display:inline-block}.nb-label{cursor:pointer;display:flex;align-items:center;font-family:"Public Sans", sans-serif;font-size:1rem;color:black;text-transform:uppercase}input.nb-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background-color:#fff;border:2px solid black;border-radius:4px;cursor:pointer}input.nb-checkbox:checked{background-color:#007bff;color:#fff}input.nb-checkbox:checked::before{content:"x";font-weight:bold;color:inherit;left:5px;position:relative;top:0px;font-size:18px;text-align:center}.badge{width:fit-content;padding:5px;border:2px solid #000;border-radius:50px;background-color:#40d39c;box-shadow:3px 3px 0 0 #000}.badge .badge-inner{display:flex;height:100%;margin:0;justify-content:center;align-items:center;border:2px solid #000;border-radius:50px}.badge .badge-inner .badge-text{color:#031926;padding:10px;margin:0}#modal{display:none}#modal:checked ~ .modal,#modal:checked ~ .modal-background{display:block}.modal-background{width:100%;height:100%;background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;display:none;z-index:9998}.modal{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;display:none;width:300px;height:300px;background-color:#fff;box-sizing:border-box;z-index:9999}.modal>p{padding:15px;margin:0}.modal-header{background-color:#f9f9f9;border-bottom:1px solid #dddddd;box-sizing:border-box;height:50px}.modal-header h3{margin:0;box-sizing:border-box;padding-left:15px;line-height:50px;color:#4d4d4d;font-size:16px;display:inline-block}.modal-header label{box-sizing:border-box;border-left:1px solid #dddddd;float:right;line-height:50px;padding:0 15px 0 15px;cursor:pointer}.modal-header label:hover img{opacity:0.6}.alert.success{background-color:#92fca2;border:1px solid #40d39c;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.error{background-color:#ffc5c8;border:1px solid #dc341e;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.warning{background-color:#f8f894;border:1px solid #fdfd96;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.info{background-color:#d5f0ff;border:1px solid #b9e2f8;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.accordion-tab{position:absolute;opacity:0;z-index:-1}.accordion{border-radius:5px;overflow:hidden;box-shadow:2px 2px 0px black;border:1px solid black}.accordion-label{display:flex;padding:1em;font-weight:bold;cursor:pointer;color:#fff}.accordion-content{max-height:0;padding:0 1em;background:white;transition:all 0.35s}.accordion-tab:checked ~ .accordion-content{max-height:100vh;padding:1em}.dropdown{border-radius:5px;overflow:hidden;box-shadow:2px 2px 0px black;border:1px solid black;padding:10px;cursor:pointer}.dropdown::after{content:'\25BC';position:absolute;top:50%;right:10px;transform:translateY(-50%)}.dropdown option{background-color:#fff;color:#333;box-shadow:2px 2px 0px black;border:1px solid black;padding:10px}.dropdown:focus{outline:none;box-shadow:0 0 5px rgba(0,0,0,0.3)}
diff --git a/docs/index.html b/docs/index.html
index d3a8c17..59f4141 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -454,18 +454,40 @@ <h3>Accordion</h3>
             <figure class="highlight">
                 <pre>
                   <button class="copy tooltip copy-button"><img src="assets/copy.svg" alt="copy"> <span class="tooltiptext">Copy to clipboard</span></button>
-                  <code class="language-html" data-lang="html">
-<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"accordion"</span><span class="tag">&gt;</span>
+<code class="language-html" data-lang="html"><span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"accordion"</span><span class="tag">&gt;</span>
        <span class="tag">&lt;input</span> <span class="class">class=</span><span class="name">"accordion-tab"</span> type=<span class="name">"checkbox"</span> id=<span class="name">"tab1"</span> <span class="tag">/&gt;</span>
        <span class="tag">label </span> <span class="class">class=</span><span class="name">"accordion-label bg-blue"</span> <span class="class">for=</span><span class="name">"tab1"</span><span class="tag">&gt;</span>Item 1<span class="tag">&lt;/label&gt;</span>
        <span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"accordion-content"</span><span class="tag">&gt;</span>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
        <span class="tag">&lt;/div&gt;</span>
-<span class="tag">&lt;/div&gt;</span>
-                  </code>
+<span class="tag">&lt;/div&gt;</span></code>
+                </pre>
+            </figure>
+        </section>
+
+        <section class="sections">
+            <h3>Dropdown</h3>
+            <p class="component-description">
+                Section demonstrates an dropdown component provided by NeoBrutalismCSS.
+            </p>
+            <select class="dropdown">
+                <option value="option1">Option 1</option>
+                <option value="option2">Option 2</option>
+                <option value="option3">Option 3</option>
+            </select>
+
+            <figure class="highlight">
+                <pre>
+                  <button class="copy tooltip copy-button"><img src="assets/copy.svg" alt="copy"> <span class="tooltiptext">Copy to clipboard</span></button>
+<code class="language-html" data-lang="html"><span class="tag">&lt;select</span> <span class="class">class=</span><span class="name">"dropdown"</span><span class="tag">&gt;</span>
+   <span class="tag">&lt;option</span> <span class="class">value=</span><span class="name">"option1"</span><span class="tag">&gt;</span>Option 1<span class="tag">&lt;/option&gt;</span>
+   <span class="tag">&lt;option</span> <span class="class">value=</span><span class="name">"option2"</span><span class="tag">&gt;</span>Option 2<span class="tag">&lt;/option&gt;</span>
+   <span class="tag">&lt;option</span> <span class="class">value=</span><span class="name">"option3"</span><span class="tag">&gt;</span>Option 3<span class="tag">&lt;/option&gt;</span>
+<span class="tag">&lt;/select&gt;</span></code>
                 </pre>
             </figure>
         </section>
+            
         
         <section class="sections backgrounds">
             <h3>Colors</h3>
diff --git a/package.json b/package.json
index 856ec16..9f9c62f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neobrutalismcss",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "NeoBrutalismCSS design framework that embraces the aesthetics of neo-brutalism in web",
   "main": "dist/index.min.css",
   "repository": {
diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss
new file mode 100644
index 0000000..ec02026
--- /dev/null
+++ b/src/scss/components/_dropdown.scss
@@ -0,0 +1,29 @@
+.dropdown {
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow: 2px 2px 0px black;
+  border: 1px solid black;
+  padding: 10px;
+  cursor: pointer;
+
+  &::after {
+    content: '\25BC'; 
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+  }
+
+  option {
+    background-color: #fff;
+    color: #333;
+    box-shadow: 2px 2px 0px black;
+    border: 1px solid black;
+    padding: 10px;
+  }
+
+  &:focus {
+    outline: none; 
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
+  }
+}
\ No newline at end of file
diff --git a/src/scss/index.scss b/src/scss/index.scss
index 04dac5f..bfafe66 100644
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -15,3 +15,4 @@
 @import "components/modal";
 @import "components/alert";
 @import "components/accordion";
+@import "components/dropdown";