JSFiddle - React, Tailwind, and code Playground

by meeky333

HTML

<script src="bootstrap"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="dropdown mb-3">
            <button class="btn btn-primary dropdown-toggle" type="button"
                    id="ddl-quick-links" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="fa fa-chevron-up fa-2x"></i>
            </button>
            <ul class="dropdown-menu" aria-labelledby="quick-links">
                <li>Add Item</li>
                <li>Add Person</li>
                <li>Add User</li>
                <li>Add Member</li>
                <li>Add Product</li>
            </ul>
        </div>

SCSS

.dropdown .btn.dropdown-toggle {
    width: 6rem;
    height: 6rem;
    border-radius: 50px;
    position: fixed;
    z-index: 99;
    bottom: 45px;
    right: 50%;
    transform: translate(50%); 
}

.dropdown-menu {
  width: 50%;
  transform: translate(-50%, 0px);
  
  li {
    padding: 10px;
  }
}