Skip to main content

Drop list

Big O

React JS​

App​

import React from "react";
import Navbar from "./components/Navbar";
import "./styles.css";

const App = () => {
  return (
    <div>
      <Navbar />
    </div>
  );
};

export default App;
import React from "react";

const Navbar = () => {
  return (
    <header>
      <nav className="navbar">
        <div className="logo">Placeholder</div>
        <ul className="nav-links">
          <li>
            <a href="#">About us</a>
          </li>
          <li className="dropdown">
            <a href="#" className="dropbtn">
              Pricing
            </a>
            <div className="dropdown-content">
              <div className="dropdown-section">
                <h4>For Individuals</h4>
                <a href="#">Introduction</a>
                <a href="#">Pay as you go</a>
              </div>
              <div className="dropdown-section">
                <h4>For Companies</h4>
                <a href="#">Startups</a>
                <a href="#">SMBs</a>
                <a href="#">Enterprise</a>
              </div>
              <a href="#" className="contact-sales">
                Contact sales
              </a>
            </div>
          </li>
          <li>
            <a href="#">Careers</a>
          </li>
          <li>
            <a href="#">Documentation</a>
          </li>
        </ul>
        <div className="nav-buttons">
          <button className="signin-btn">Sign in</button>
          <button className="demo-btn">Schedule a Demo</button>
        </div>
      </nav>
    </header>
  );
};

export default Navbar;
CSS Drop list

React TS​

App​

import React from "react";
import Navbar from "./components/Navbar";
import "./styles.css";

const App: React.FC = () => {
  return (
    <div>
      <Navbar />
    </div>
  );
};

export default App;
import React from "react";

const Navbar: React.FC = () => {
  return (
    <header>
      <nav className="navbar">
        <div className="logo">Placeholder</div>
        <ul className="nav-links">
          <li>
            <a href="#">About us</a>
          </li>
          <li className="dropdown">
            <a href="#" className="dropbtn">
              Pricing
            </a>
            <div className="dropdown-content">
              <div className="dropdown-section">
                <h4>For Individuals</h4>
                <a href="#">Introduction</a>
                <a href="#">Pay as you go</a>
              </div>
              <div className="dropdown-section">
                <h4>For Companies</h4>
                <a href="#">Startups</a>
                <a href="#">SMBs</a>
                <a href="#">Enterprise</a>
              </div>
              <a href="#" className="contact-sales">
                Contact sales
              </a>
            </div>
          </li>
          <li>
            <a href="#">Careers</a>
          </li>
          <li>
            <a href="#">Documentation</a>
          </li>
        </ul>
        <div className="nav-buttons">
          <button className="signin-btn">Sign in</button>
          <button className="demo-btn">Schedule a Demo</button>
        </div>
      </nav>
    </header>
  );
};

export default Navbar;
CSS Drop list
Big O

React JS + Tailwind​

App​

import React from "react";
import Navbar from "./components/Navbar";

const App = () => {
  return (
    <div>
      <Navbar />
    </div>
  );
};

export default App;
import React from "react";

const Navbar = () => {
  return (
    <header>
      <nav className="bg-gray-800 text-white p-4 flex justify-between items-center">
        <div className="text-xl font-bold">Placeholder</div>
        <ul className="flex space-x-6">
          <li>
            <a href="#" className="hover:bg-gray-700 p-2 rounded">
              About us
            </a>
          </li>
          <li className="relative group">
            <a href="#" className="hover:bg-gray-700 p-2 rounded">
              Pricing
            </a>
            <div className="absolute hidden group-hover:block bg-white text-black w-48 mt-2 shadow-lg rounded-md">
              <div className="p-4">
                <h4 className="font-bold mb-2">For Individuals</h4>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  Introduction
                </a>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  Pay as you go
                </a>
              </div>
              <div className="p-4 border-t border-gray-200">
                <h4 className="font-bold mb-2">For Companies</h4>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  Startups
                </a>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  SMBs
                </a>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  Enterprise
                </a>
              </div>
              <div className="p-4 border-t border-gray-200">
                <a
                  href="#"
                  className="block text-center bg-gray-800 text-white py-2 rounded hover:bg-gray-700"
                >
                  Contact sales
                </a>
              </div>
            </div>
          </li>
          <li>
            <a href="#" className="hover:bg-gray-700 p-2 rounded">
              Careers
            </a>
          </li>
          <li>
            <a href="#" className="hover:bg-gray-700 p-2 rounded">
              Documentation
            </a>
          </li>
        </ul>
        <div className="flex space-x-4">
          <button className="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600">
            Sign in
          </button>
          <button className="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-500">
            Schedule a Demo
          </button>
        </div>
      </nav>
    </header>
  );
};

export default Navbar;

React TS + Tailwind​

App​

import React from "react";
import Navbar from "./components/Navbar";

const App: React.FC = () => {
  return (
    <div>
      <Navbar />
    </div>
  );
};

export default App;
import React from "react";

const Navbar: React.FC = () => {
  return (
    <header>
      <nav className="bg-gray-800 text-white p-4 flex justify-between items-center">
        <div className="text-xl font-bold">Placeholder</div>
        <ul className="flex space-x-6">
          <li>
            <a href="#" className="hover:bg-gray-700 p-2 rounded">
              About us
            </a>
          </li>
          <li className="relative group">
            <a href="#" className="hover:bg-gray-700 p-2 rounded">
              Pricing
            </a>
            <div className="absolute hidden group-hover:block bg-white text-black w-48 mt-2 shadow-lg rounded-md">
              <div className="p-4">
                <h4 className="font-bold mb-2">For Individuals</h4>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  Introduction
                </a>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  Pay as you go
                </a>
              </div>
              <div className="p-4 border-t border-gray-200">
                <h4 className="font-bold mb-2">For Companies</h4>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  Startups
                </a>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  SMBs
                </a>
                <a href="#" className="block hover:bg-gray-100 p-2 rounded">
                  Enterprise
                </a>
              </div>
              <div className="p-4 border-t border-gray-200">
                <a
                  href="#"
                  className="block text-center bg-gray-800 text-white py-2 rounded hover:bg-gray-700"
                >
                  Contact sales
                </a>
              </div>
            </div>
          </li>
          <li>
            <a href="#" className="hover:bg-gray-700 p-2 rounded">
              Careers
            </a>
          </li>
          <li>
            <a href="#" className="hover:bg-gray-700 p-2 rounded">
              Documentation
            </a>
          </li>
        </ul>
        <div className="flex space-x-4">
          <button className="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600">
            Sign in
          </button>
          <button className="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-500">
            Schedule a Demo
          </button>
        </div>
      </nav>
    </header>
  );
};

export default Navbar;