first commit

src/components/AccordionBasic.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+function AccordionBasic(props) {
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="px-5 py-4 rounded-sm border border-slate-200">
+      <button
+        className="flex items-center justify-between w-full group mb-1"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+      >
+        <div className="text-sm text-slate-800 font-medium">{props.title}</div>
+        <svg className={`w-8 h-8 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-3 ${open && 'rotate-180'}`} viewBox="0 0 32 32">
+          <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+        </svg>
+      </button>
+      <div className={`text-sm ${!open && 'hidden'}`}>
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+export default AccordionBasic;

src/components/AccordionTableItem.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+
+function AccordionTableItem(props) {
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <tbody className="text-sm">
+      <tr>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="flex items-center text-slate-800">
+            <div className="w-10 h-10 shrink-0 flex items-center justify-center bg-slate-100 rounded-full mr-2 sm:mr-3">
+              <img className="rounded-full ml-1" src={props.image} width="40" height="40" alt={props.customer} />
+            </div>
+            <div className="font-medium text-slate-800">{props.customer}</div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-left font-medium text-emerald-500">{props.total}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-0.5">{props.status}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-center">{props.items}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-left">{props.location}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="flex items-center">
+            <svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
+              <path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
+            </svg>
+            <div>{props.type}</div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          <div className="flex items-center">
+            <button
+              className={`text-slate-400 hover:text-slate-500 transform ${open && 'rotate-180'}`}
+              aria-expanded={open}
+              onClick={() => setOpen(!open)}
+              aria-controls={`description-${props.id}`}
+            >
+              <span className="sr-only">Menu</span>
+              <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+              </svg>
+            </button>
+          </div>
+        </td>
+      </tr>
+      {/*
+      Example of content revealing when clicking the button on the right side:
+      Note that you must set a "colSpan" attribute on the <td> element,
+      and it should match the number of columns in your table
+      */}
+      <tr id={`description-${props.id}`} role="region" className={`${!open && 'hidden'}`}>
+        <td colSpan="10" className="px-2 first:pl-5 last:pr-5 py-3">
+          <div className="flex items-center bg-slate-50 p-3 -mt-3">
+            <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2">
+              <path d="M1 16h3c.3 0 .5-.1.7-.3l11-11c.4-.4.4-1 0-1.4l-3-3c-.4-.4-1-.4-1.4 0l-11 11c-.2.2-.3.4-.3.7v3c0 .6.4 1 1 1zm1-3.6l10-10L13.6 4l-10 10H2v-1.6z" />
+            </svg>
+            <div className="italic">{props.description}</div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  );
+}
+
+export default AccordionTableItem;

src/components/AccordionTableRichItem.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+
+function AccordionTableRichItem(props) {
+
+  const [open, setOpen] = useState(false);
+
+  return (
+    <tbody className="text-sm">
+      <tr>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="flex items-center text-slate-800">
+            <div className="w-10 h-10 shrink-0 flex items-center justify-center bg-slate-100 rounded-full mr-2 sm:mr-3">
+              <img className="rounded-full ml-1" src={props.image} width="40" height="40" alt={props.customer} />
+            </div>
+            <div className="font-medium text-slate-800">{props.customer}</div>
+          </div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-left">{props.email}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-left">{props.location}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-left">{props.date}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
+          <div className="text-left text-emerald-500 font-medium">{props.amount}</div>
+        </td>
+        <td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
+          <div className="flex items-center">
+            <button
+              className={`text-slate-400 hover:text-slate-500 transform ${open && 'rotate-180'}`}
+              aria-expanded={open}
+              onClick={() => setOpen(!open)}
+              aria-controls={`description-${props.id}`}
+            >
+              <span className="sr-only">Menu</span>
+              <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+                <path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
+              </svg>
+            </button>
+          </div>
+        </td>
+      </tr>
+      {/*
+      Example of content revealing when clicking the button on the right side:
+      Note that you must set a "colSpan" attribute on the <td> element,
+      and it should match the number of columns in your table
+      */}
+      <tr id={`description-${props.id}`} role="region" className={`${!open && 'hidden'}`}>
+        <td colSpan="10" className="px-2 first:pl-5 last:pr-5 py-3">
+          <div className="bg-slate-50 p-3 -mt-3">
+            <div className="text-sm mb-3">
+              <div className="font-medium text-slate-800 mb-1">{props.descriptionTitle}</div>
+              <div>{props.descriptionBody}</div>
+            </div>
+            <button className="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white">Approve</button>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  );
+}
+
+export default AccordionTableRichItem;

src/components/Banner.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+function Banner({
+  children,
+  className,
+  type,
+  open,
+  setOpen
+}) {
+
+  const typeIcon = (type) => {
+    switch (type) {
+      case 'warning':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
+          </svg>
+        );
+      case 'success':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
+          </svg>
+        );
+    }
+  };
+
+  const typeColor = (type) => {
+    switch (type) {
+      case 'warning':
+        return 'bg-amber-500';
+      case 'error':
+        return 'bg-rose-500';
+      case 'success':
+        return 'bg-emerald-500';
+      default:
+        return 'bg-indigo-500';
+    }
+  };
+
+  return (
+    <>
+      {open &&
+        <div className={className}>
+          <div className={`px-4 py-2 rounded-sm text-sm text-white ${typeColor(type)}`}>
+            <div className="flex w-full justify-between items-start">
+              <div className="flex">
+                {typeIcon(type)}
+                <div className="font-medium">
+                {children}
+                </div>
+              </div>
+              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
+                <div className="sr-only">Close</div>
+                <svg className="w-4 h-4 fill-current">
+                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  );
+}
+
+export default Banner;

src/components/Banner2.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+function Banner2({
+  children,
+  className,
+  type,
+  open,
+  setOpen
+}) {
+
+  const typeIcon = (type) => {
+    switch (type) {
+      case 'warning':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
+          </svg>
+        );
+      case 'success':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
+          </svg>
+        );
+    }
+  };
+
+  const typeColor = (type) => {
+    switch (type) {
+      case 'warning':
+        return 'bg-amber-100 border-amber-200 text-amber-600';
+      case 'error':
+        return 'bg-rose-100 border-rose-200 text-rose-600';
+      case 'success':
+        return 'bg-emerald-100 border-emerald-200 text-emerald-600';
+      default:
+        return 'bg-indigo-100 border-indigo-200 text-indigo-500';
+    }
+  };
+
+  return (
+    <>
+      {open &&
+        <div className={className}>
+          <div className={`px-4 py-2 rounded-sm text-sm border ${typeColor(type)}`}>
+            <div className="flex w-full justify-between items-start">
+              <div className="flex">
+                {typeIcon(type)}
+                <div>
+                {children}
+                </div>
+              </div>
+              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
+                <div className="sr-only">Close</div>
+                <svg className="w-4 h-4 fill-current">
+                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  );
+}
+
+export default Banner2;

src/components/DateSelect.jsx

@@ -0,0 +1,116 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function DateSelect() {
+
+  const options = [
+    {
+      id: 0,
+      period: 'Today'
+    },
+    {
+      id: 1,
+      period: 'Last 7 Days'
+    },
+    {
+      id: 2,
+      period: 'Last Month'
+    },
+    {
+      id: 3,
+      period: 'Last 12 Months'
+    },
+    {
+      id: 4,
+      period: 'All Time'
+    }
+  ];
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [selected, setSelected] = useState(2);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative">
+      <button
+        ref={trigger}
+        className="btn justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
+        aria-label="Select date range"
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <span className="flex items-center">
+          <svg className="w-4 h-4 fill-current text-slate-500 shrink-0 mr-2" viewBox="0 0 16 16">
+            <path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
+          </svg>
+          <span>{options[selected].period}</span>
+        </span>
+        <svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
+          <path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
+        </svg>
+      </button>
+      <Transition
+        show={dropdownOpen}
+        tag="div"
+        className="z-10 absolute top-full right-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
+        enter="transition ease-out duration-100 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-100"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div
+          ref={dropdown}
+          className="font-medium text-sm text-slate-600"
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          {
+            options.map(option => {
+              return (
+                <button
+                  key={option.id}
+                  tabIndex="0"
+                  className={`flex items-center w-full hover:bg-slate-50 py-1 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
+                  onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
+                >
+                  <svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
+                    <path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
+                  </svg>
+                  <span>{option.period}</span>
+                </button>
+              )
+            })
+          }
+        </div>
+      </Transition>
+    </div>
+  );
+}
+
+export default DateSelect;

src/components/Datepicker.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Flatpickr from 'react-flatpickr';
+
+function Datepicker({
+  align
+}) {
+
+  const options = {
+    mode: 'range',
+    static: true,
+    monthSelectorType: 'static',
+    dateFormat: 'M j, Y',
+    defaultDate: [new Date().setDate(new Date().getDate() - 6), new Date()],
+    prevArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M5.4 10.8l1.4-1.4-4-4 4-4L5.4 0 0 5.4z" /></svg>',
+    nextArrow: '<svg class="fill-current" width="7" height="11" viewBox="0 0 7 11"><path d="M1.4 10.8L0 9.4l4-4-4-4L1.4 0l5.4 5.4z" /></svg>',
+    onReady: (selectedDates, dateStr, instance) => {
+      instance.element.value = dateStr.replace('to', '-');
+      const customClass = (align) ? align : '';
+      instance.calendarContainer.classList.add(`flatpickr-${customClass}`);
+    },
+    onChange: (selectedDates, dateStr, instance) => {
+      instance.element.value = dateStr.replace('to', '-');
+    },
+  }
+
+  return (
+    <div className="relative">
+      <Flatpickr className="form-input pl-9 text-slate-500 hover:text-slate-600 font-medium focus:border-slate-300 w-60" options={options} />
+      <div className="absolute inset-0 right-auto flex items-center pointer-events-none">
+        <svg className="w-4 h-4 fill-current text-slate-500 ml-3" viewBox="0 0 16 16">
+          <path d="M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V3a1 1 0 00-1-1zm-1 12H2V6h12v8z" />
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+export default Datepicker;

src/components/DropdownClassic.jsx

@@ -0,0 +1,113 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function DropdownClassic() {
+
+  const options = [
+    {
+      id: 0,
+      period: 'Today'
+    },
+    {
+      id: 1,
+      period: 'Last 7 Days'
+    },
+    {
+      id: 2,
+      period: 'Last Month'
+    },
+    {
+      id: 3,
+      period: 'Last 12 Months'
+    },
+    {
+      id: 4,
+      period: 'All Time'
+    }
+  ];
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [selected, setSelected] = useState(2);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={trigger}
+        className="btn justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
+        aria-label="Select date range"
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <span className="flex items-center">
+          <span>{options[selected].period}</span>
+        </span>
+        <svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
+          <path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
+        </svg>
+      </button>
+      <Transition
+        show={dropdownOpen}
+        tag="div"
+        className="z-10 absolute top-full left-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
+        enter="transition ease-out duration-100 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-100"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div
+          ref={dropdown}
+          className="font-medium text-sm text-slate-600"
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          {
+            options.map(option => {
+              return (
+                <button
+                  key={option.id}
+                  tabIndex="0"
+                  className={`flex items-center w-full hover:bg-slate-50 py-1 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
+                  onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
+                >
+                  <svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
+                    <path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
+                  </svg>
+                  <span>{option.period}</span>
+                </button>
+              )
+            })
+          }
+        </div>
+      </Transition>
+    </div>
+  );
+}
+
+export default DropdownClassic;

src/components/DropdownEditMenu.jsx

@@ -0,0 +1,75 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function DropdownEditMenu({
+  children,
+  align,
+  ...rest
+}) {
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div {...rest}>
+      <button
+        ref={trigger}
+        className={`bg-white text-slate-400 hover:text-slate-500 rounded-full ${dropdownOpen && 'bg-slate-100 text-slate-500'}`}
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <span className="sr-only">Menu</span>
+        <svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
+          <circle cx="16" cy="16" r="2" />
+          <circle cx="10" cy="16" r="2" />
+          <circle cx="22" cy="16" r="2" />
+        </svg>
+      </button>
+      <Transition
+        show={dropdownOpen}
+        tag="div"
+        className={`origin-top-right z-10 absolute top-full min-w-36 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <ul
+          ref={dropdown}
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          {children}
+        </ul>
+      </Transition>
+    </div>
+  );
+}
+
+export default DropdownEditMenu;

src/components/DropdownFilter.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function DropdownFilter({
+  align
+}) {
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={trigger}
+        className="btn bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <span className="sr-only">Filter</span><wbr />
+        <svg className="w-4 h-4 fill-current" viewBox="0 0 16 16">
+          <path d="M9 15H7a1 1 0 010-2h2a1 1 0 010 2zM11 11H5a1 1 0 010-2h6a1 1 0 010 2zM13 7H3a1 1 0 010-2h10a1 1 0 010 2zM15 3H1a1 1 0 010-2h14a1 1 0 010 2z" />
+        </svg>
+      </button>
+      <Transition
+        show={dropdownOpen}
+        tag="div"
+        className={`origin-top-right z-10 absolute top-full min-w-56 bg-white border border-slate-200 pt-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div ref={dropdown}>
+          <div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Filters</div>
+          <ul className="mb-4">
+            <li className="py-1 px-3">
+              <label className="flex items-center">
+                <input type="checkbox" className="form-checkbox" />
+                <span className="text-sm font-medium ml-2">Direct VS Indirect</span>
+              </label>
+            </li>
+            <li className="py-1 px-3">
+              <label className="flex items-center">
+                <input type="checkbox" className="form-checkbox" />
+                <span className="text-sm font-medium ml-2">Real Time Value</span>
+              </label>
+            </li>
+            <li className="py-1 px-3">
+              <label className="flex items-center">
+                <input type="checkbox" className="form-checkbox" />
+                <span className="text-sm font-medium ml-2">Top Channels</span>
+              </label>
+            </li>
+            <li className="py-1 px-3">
+              <label className="flex items-center">
+                <input type="checkbox" className="form-checkbox" />
+                <span className="text-sm font-medium ml-2">Sales VS Refunds</span>
+              </label>
+            </li>
+            <li className="py-1 px-3">
+              <label className="flex items-center">
+                <input type="checkbox" className="form-checkbox" />
+                <span className="text-sm font-medium ml-2">Last Order</span>
+              </label>
+            </li>
+            <li className="py-1 px-3">
+              <label className="flex items-center">
+                <input type="checkbox" className="form-checkbox" />
+                <span className="text-sm font-medium ml-2">Total Spent</span>
+              </label>
+            </li>
+          </ul>
+          <div className="py-2 px-3 border-t border-slate-200 bg-slate-50">
+            <ul className="flex items-center justify-between">
+              <li>
+                <button className="btn-xs bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600">Clear</button>
+              </li>
+              <li>
+                <button className="btn-xs bg-indigo-500 hover:bg-indigo-600 text-white" onClick={() => setDropdownOpen(false)} onBlur={() => setDropdownOpen(false)}>Apply</button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </Transition>
+    </div>
+  );
+}
+
+export default DropdownFilter;

src/components/DropdownFull.jsx

@@ -0,0 +1,109 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function DropdownFull() {
+
+  const options = [
+    {
+      id: 0,
+      period: 'Most Popular'
+    },
+    {
+      id: 1,
+      period: 'Newest'
+    },
+    {
+      id: 2,
+      period: 'Lowest Price'
+    },
+    {
+      id: 3,
+      period: 'Highest Price'
+    }
+  ];
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [selected, setSelected] = useState(0);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex w-full">
+      <button
+        ref={trigger}
+        className="btn w-full justify-between min-w-44 bg-white border-slate-200 hover:border-slate-300 text-slate-500 hover:text-slate-600"
+        aria-label="Select date range"
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <span className="flex items-center">
+          <span>{options[selected].period}</span>
+        </span>
+        <svg className="shrink-0 ml-1 fill-current text-slate-400" width="11" height="7" viewBox="0 0 11 7">
+          <path d="M5.4 6.8L0 1.4 1.4 0l4 4 4-4 1.4 1.4z" />
+        </svg>
+      </button>
+      <Transition
+        show={dropdownOpen}
+        tag="div"
+        className="z-10 absolute top-full left-0 w-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1"
+        enter="transition ease-out duration-100 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-100"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div
+          ref={dropdown}
+          className="font-medium text-sm text-slate-600 divide-y divide-slate-200"
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          {
+            options.map(option => {
+              return (
+                <button
+                  key={option.id}
+                  tabIndex="0"
+                  className={`flex items-center justify-between w-full hover:bg-slate-50 py-2 px-3 cursor-pointer ${option.id === selected && 'text-indigo-500'}`}
+                  onClick={() => { setSelected(option.id); setDropdownOpen(false); }}
+                  >
+                  <span>{option.period}</span>
+                  <svg className={`shrink-0 mr-2 fill-current text-indigo-500 ${option.id !== selected && 'invisible'}`} width="12" height="9" viewBox="0 0 12 9">
+                    <path d="M10.28.28L3.989 6.575 1.695 4.28A1 1 0 00.28 5.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28.28z" />
+                  </svg>
+                </button>
+              )
+            })
+          }
+        </div>
+      </Transition>
+    </div>
+  );
+}
+
+export default DropdownFull;

src/components/DropdownHelp.jsx

@@ -0,0 +1,111 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Transition from '../utils/Transition';
+
+function DropdownHelp({
+  align
+}) {
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={trigger}
+        className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition duration-150 rounded-full ${dropdownOpen && 'bg-slate-200'}`}
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <span className="sr-only">Need help?</span>
+        <svg className="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path className="fill-current text-slate-500" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+        </svg>
+      </button>
+
+      <Transition
+        className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
+        show={dropdownOpen}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div
+          ref={dropdown}
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          <div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Need help?</div>
+          <ul>
+            <li>
+              <Link
+                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
+                to="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                <svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
+                  <rect y="3" width="12" height="9" rx="1" />
+                  <path d="M2 0h8v2H2z" />
+                </svg>
+                <span>Documentation</span>
+              </Link>
+            </li>
+            <li>
+              <Link
+                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
+                to="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                <svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
+                  <path d="M10.5 0h-9A1.5 1.5 0 000 1.5v9A1.5 1.5 0 001.5 12h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 0zM10 7L8.207 5.207l-3 3-1.414-1.414 3-3L5 2h5v5z" />
+                </svg>
+                <span>Support Site</span>
+              </Link>
+            </li>
+            <li>
+              <Link
+                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
+                to="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                <svg className="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
+                  <path d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z" />
+                </svg>
+                <span>Contact us</span>
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  )
+}
+
+export default DropdownHelp;

src/components/DropdownNotifications.jsx

@@ -0,0 +1,106 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Transition from '../utils/Transition';
+
+function DropdownNotifications({
+  align
+}) {
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={trigger}
+        className={`w-8 h-8 flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition duration-150 rounded-full ${dropdownOpen && 'bg-slate-200'}`}
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <span className="sr-only">Notifications</span>
+        <svg className="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+          <path className="fill-current text-slate-500" d="M6.5 0C2.91 0 0 2.462 0 5.5c0 1.075.37 2.074 1 2.922V12l2.699-1.542A7.454 7.454 0 006.5 11c3.59 0 6.5-2.462 6.5-5.5S10.09 0 6.5 0z" />
+          <path className="fill-current text-slate-400" d="M16 9.5c0-.987-.429-1.897-1.147-2.639C14.124 10.348 10.66 13 6.5 13c-.103 0-.202-.018-.305-.021C7.231 13.617 8.556 14 10 14c.449 0 .886-.04 1.307-.11L15 16v-4h-.012C15.627 11.285 16 10.425 16 9.5z" />
+        </svg>
+        <div className="absolute top-0 right-0 w-2.5 h-2.5 bg-rose-500 border-2 border-white rounded-full"></div>
+      </button>
+
+      <Transition
+        className={`origin-top-right z-10 absolute top-full -mr-48 sm:mr-0 min-w-80 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
+        show={dropdownOpen}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div
+          ref={dropdown}
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          <div className="text-xs font-semibold text-slate-400 uppercase pt-1.5 pb-2 px-4">Notifications</div>
+          <ul>
+            <li className="border-b border-slate-200 last:border-0">
+              <Link
+                className="block py-2 px-4 hover:bg-slate-50"
+                to="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                <span className="block text-sm mb-2">📣 <span className="font-medium text-slate-800">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
+                <span className="block text-xs font-medium text-slate-400">Feb 12, 2021</span>
+              </Link>
+            </li>
+            <li className="border-b border-slate-200 last:border-0">
+              <Link
+                className="block py-2 px-4 hover:bg-slate-50"
+                to="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                <span className="block text-sm mb-2">📣 <span className="font-medium text-slate-800">Edit your information in a swipe</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
+                <span className="block text-xs font-medium text-slate-400">Feb 9, 2021</span>
+              </Link>
+            </li>
+            <li className="border-b border-slate-200 last:border-0">
+              <Link
+                className="block py-2 px-4 hover:bg-slate-50"
+                to="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                <span className="block text-sm mb-2">🚀<span className="font-medium text-slate-800">Say goodbye to paper receipts!</span> Sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim.</span>
+                <span className="block text-xs font-medium text-slate-400">Jan 24, 2020</span>
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  )
+}
+
+export default DropdownNotifications;

src/components/DropdownProfile.jsx

@@ -0,0 +1,100 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Transition from '../utils/Transition';
+
+import UserAvatar from '../images/user-avatar-32.png';
+
+function DropdownProfile({
+  align
+}) {
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={trigger}
+        className="inline-flex justify-center items-center group"
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <img className="w-8 h-8 rounded-full" src={UserAvatar} width="32" height="32" alt="User" />
+        <div className="flex items-center truncate">
+          <span className="truncate ml-2 text-sm font-medium group-hover:text-slate-800">Acme Inc.</span>
+          <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
+            <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
+          </svg>
+        </div>
+      </button>
+
+      <Transition
+        className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
+        show={dropdownOpen}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div
+          ref={dropdown}
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          <div className="pt-0.5 pb-2 px-3 mb-1 border-b border-slate-200">
+            <div className="font-medium text-slate-800">Acme Inc.</div>
+            <div className="text-xs text-slate-500 italic">Administrator</div>
+          </div>
+          <ul>
+            <li>
+              <Link
+                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
+                to="/settings"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                Settings
+              </Link>
+            </li>
+            <li>
+              <Link
+                className="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3"
+                to="/signin"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                Sign Out
+              </Link>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  )
+}
+
+export default DropdownProfile;

src/components/DropdownSort.jsx

@@ -0,0 +1,90 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function DropdownSort({
+  align
+}) {
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={trigger}
+        className="inline-flex justify-center items-center group"
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <div className="flex items-center truncate">
+          <span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">Newest</span>
+          <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
+            <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
+          </svg>
+        </div>
+      </button>
+
+      <Transition
+        className={`origin-top-right z-10 absolute top-full bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
+          align === 'right' ? 'right-0' : 'left-0'
+        }`}
+        show={dropdownOpen}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div ref={dropdown} onFocus={() => setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)}>
+          <ul>
+            <li>
+              <a
+                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
+                href="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                Oldest
+              </a>
+            </li>
+            <li>
+              <a
+                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
+                href="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                Popular
+              </a>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  );
+}
+
+export default DropdownSort;

src/components/DropdownSwitch.jsx

@@ -0,0 +1,110 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+import DropdownImage from '../images/user-avatar-32.png';
+import DropdownImage01 from '../images/channel-01.png';
+import DropdownImage02 from '../images/channel-02.png';
+import DropdownImage03 from '../images/channel-03.png';
+
+function DropdownSwitch({
+  align
+}) {
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative">
+      <button
+        ref={trigger}
+        className="grow flex items-center truncate"
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <img className="w-8 h-8 rounded-full mr-2" src={DropdownImage} width="32" height="32" alt="Group 01" />
+        <div className="truncate">
+          <span className="text-sm font-medium">Acme Inc.</span>
+        </div>
+        <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
+          <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
+        </svg>
+      </button>
+      <Transition
+        className={`origin-top-right z-10 absolute top-full min-w-60 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${align === 'right' ? 'right-0' : 'left-0'}`}
+        show={dropdownOpen}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <ul
+          ref={dropdown}
+          onFocus={() => setDropdownOpen(true)}
+          onBlur={() => setDropdownOpen(false)}
+        >
+          <li>
+            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
+              <div className="flex items-center justify-between">
+                <div className="grow flex items-center truncate">
+                  <img className="w-7 h-7 rounded-full mr-2" src={DropdownImage01} width="28" height="28" alt="Channel 01" />
+                  <div className="truncate">Acme Inc.</div>
+                </div>
+                <svg className="w-3 h-3 shrink-0 fill-current text-indigo-500 ml-1" viewBox="0 0 12 12">
+                  <path d="M10.28 1.28L3.989 7.575 1.695 5.28A1 1 0 00.28 6.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 1.28z" />
+                </svg>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
+              <div className="flex items-center justify-between">
+                <div className="grow flex items-center truncate">
+                  <img className="w-7 h-7 rounded-full mr-2" src={DropdownImage02} width="28" height="28" alt="Channel 02" />
+                  <div className="truncate">Acme Limited</div>
+                </div>
+              </div>
+            </a>
+          </li>
+          <li>
+            <a className="font-medium text-sm text-slate-600 hover:text-slate-800 block py-1.5 px-3" href="#0" onClick={() => setDropdownOpen(false)}>
+              <div className="flex items-center justify-between">
+                <div className="grow flex items-center truncate">
+                  <img className="w-7 h-7 rounded-full mr-2" src={DropdownImage03} width="28" height="28" alt="Channel 03" />
+                  <div className="truncate">Acme Srl</div>
+                </div>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </Transition>
+    </div>
+  )
+}
+
+export default DropdownSwitch;

src/components/DropdownTransaction.jsx

@@ -0,0 +1,90 @@
+import React, { useState, useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function DropdownTransaction({
+  align
+}) {
+
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const trigger = useRef(null);
+  const dropdown = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!dropdown.current) return;
+      if (!dropdownOpen || dropdown.current.contains(target) || trigger.current.contains(target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!dropdownOpen || keyCode !== 27) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="relative inline-flex">
+      <button
+        ref={trigger}
+        className="inline-flex justify-center items-center group"
+        aria-haspopup="true"
+        onClick={() => setDropdownOpen(!dropdownOpen)}
+        aria-expanded={dropdownOpen}
+      >
+        <div className="flex items-center truncate">
+          <span className="truncate font-medium text-indigo-500 group-hover:text-indigo-600">My Personal Account</span>
+          <svg className="w-3 h-3 shrink-0 ml-1 fill-current text-slate-400" viewBox="0 0 12 12">
+            <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
+          </svg>
+        </div>
+      </button>
+
+      <Transition
+        className={`origin-top-right z-10 absolute top-full min-w-44 bg-white border border-slate-200 py-1.5 rounded shadow-lg overflow-hidden mt-1 ${
+          align === 'right' ? 'right-0' : 'left-0'
+        }`}
+        show={dropdownOpen}
+        enter="transition ease-out duration-200 transform"
+        enterStart="opacity-0 -translate-y-2"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+      >
+        <div ref={dropdown} onFocus={() => setDropdownOpen(true)} onBlur={() => setDropdownOpen(false)}>
+          <ul>
+            <li>
+              <a
+                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
+                href="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                Business Account
+              </a>
+            </li>
+            <li>
+              <a
+                className="font-medium text-sm text-slate-600 hover:text-slate-800 flex items-center py-1 px-3"
+                href="#0"
+                onClick={() => setDropdownOpen(!dropdownOpen)}
+              >
+                Family Account
+              </a>
+            </li>
+          </ul>
+        </div>
+      </Transition>
+    </div>
+  );
+}
+
+export default DropdownTransaction;

src/components/ModalAction.jsx

@@ -0,0 +1,80 @@
+import React, { useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function ModalAction({
+  children,
+  id,
+  modalOpen,
+  setModalOpen
+}) {
+
+  const modalContent = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!modalOpen || modalContent.current.contains(target)) return
+      setModalOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!modalOpen || keyCode !== 27) return;
+      setModalOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <>
+      {/* Modal backdrop */}
+      <Transition
+        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
+        show={modalOpen}
+        enter="transition ease-out duration-200"
+        enterStart="opacity-0"
+        enterEnd="opacity-100"
+        leave="transition ease-out duration-100"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+        aria-hidden="true"
+      />
+      {/* Modal dialog */}
+      <Transition
+        id={id}
+        className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
+        role="dialog"
+        aria-modal="true"
+        show={modalOpen}
+        enter="transition ease-in-out duration-200"
+        enterStart="opacity-0 translate-y-4"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-in-out duration-200"
+        leaveStart="opacity-100 translate-y-0"
+        leaveEnd="opacity-0 translate-y-4"
+      >
+        <div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
+          <div className="p-6">
+            <div className="relative">
+              {/* Close button */}
+              <button className="absolute top-0 right-0 text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
+                <div className="sr-only">Close</div>
+                <svg className="w-4 h-4 fill-current">
+                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                </svg>
+              </button>
+              {children}
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </>
+  );
+}
+
+export default ModalAction;

src/components/ModalBasic.jsx

@@ -0,0 +1,82 @@
+import React, { useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function ModalBasic({
+  children,
+  id,
+  title,
+  modalOpen,
+  setModalOpen
+}) {
+
+  const modalContent = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!modalOpen || modalContent.current.contains(target)) return
+      setModalOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!modalOpen || keyCode !== 27) return;
+      setModalOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <>
+      {/* Modal backdrop */}
+      <Transition
+        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
+        show={modalOpen}
+        enter="transition ease-out duration-200"
+        enterStart="opacity-0"
+        enterEnd="opacity-100"
+        leave="transition ease-out duration-100"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+        aria-hidden="true"
+      />
+      {/* Modal dialog */}
+      <Transition
+        id={id}
+        className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
+        role="dialog"
+        aria-modal="true"
+        show={modalOpen}
+        enter="transition ease-in-out duration-200"
+        enterStart="opacity-0 translate-y-4"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-in-out duration-200"
+        leaveStart="opacity-100 translate-y-0"
+        leaveEnd="opacity-0 translate-y-4"
+      >
+        <div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
+          {/* Modal header */}
+          <div className="px-5 py-3 border-b border-slate-200">
+            <div className="flex justify-between items-center">
+              <div className="font-semibold text-slate-800">{title}</div>
+              <button className="text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
+                <div className="sr-only">Close</div>
+                <svg className="w-4 h-4 fill-current">
+                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          {children}     
+        </div>        
+      </Transition>
+    </>
+  );
+}
+
+export default ModalBasic;

src/components/ModalBlank.jsx

@@ -0,0 +1,69 @@
+import React, { useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function ModalBlank({
+  children,
+  id,
+  modalOpen,
+  setModalOpen
+}) {
+
+  const modalContent = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!modalOpen || modalContent.current.contains(target)) return
+      setModalOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!modalOpen || keyCode !== 27) return;
+      setModalOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <>
+      {/* Modal backdrop */}
+      <Transition
+        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
+        show={modalOpen}
+        enter="transition ease-out duration-200"
+        enterStart="opacity-0"
+        enterEnd="opacity-100"
+        leave="transition ease-out duration-100"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+        aria-hidden="true"
+      />
+      {/* Modal dialog */}
+      <Transition
+        id={id}
+        className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
+        role="dialog"
+        aria-modal="true"
+        show={modalOpen}
+        enter="transition ease-in-out duration-200"
+        enterStart="opacity-0 translate-y-4"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-in-out duration-200"
+        leaveStart="opacity-100 translate-y-0"
+        leaveEnd="opacity-0 translate-y-4"
+      >
+        <div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
+          {children}
+        </div>
+      </Transition>
+    </>
+  );
+}
+
+export default ModalBlank;

src/components/ModalCookies.jsx

@@ -0,0 +1,84 @@
+import React, { useRef, useEffect } from 'react';
+import Transition from '../utils/Transition';
+
+function ModalCookies({
+  children,
+  id,
+  title,
+  modalOpen,
+  setModalOpen
+}) {
+
+  const modalContent = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!modalOpen || modalContent.current.contains(target)) return
+      setModalOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!modalOpen || keyCode !== 27) return;
+      setModalOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <>
+      {/* Modal backdrop */}
+      <Transition
+        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
+        show={modalOpen}
+        enter="transition ease-out duration-200"
+        enterStart="opacity-0"
+        enterEnd="opacity-100"
+        leave="transition ease-out duration-100"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+        aria-hidden="true"
+      />
+      {/* Modal dialog */}
+      <Transition
+        id={id}
+        className="fixed inset-0 z-50 overflow-hidden flex items-center my-4 justify-center transform px-4 sm:px-6"
+        role="dialog"
+        aria-modal="true"
+        show={modalOpen}
+        enter="transition ease-in-out duration-200"
+        enterStart="opacity-0 translate-y-4"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-in-out duration-200"
+        leaveStart="opacity-100 translate-y-0"
+        leaveEnd="opacity-0 translate-y-4"
+      >
+        <div ref={modalContent} className="bg-white rounded shadow-lg overflow-auto max-w-lg w-full max-h-full">
+          <div className="p-5">
+            {/* Modal header */}
+            <div className="mb-2">
+              <div className="flex justify-between items-center">
+                <div className="text-lg font-semibold text-slate-800">{title}</div>
+                <button className="text-slate-400 hover:text-slate-500" onClick={(e) => { e.stopPropagation(); setModalOpen(false); }}>
+                  <div className="sr-only">Close</div>
+                  <svg className="w-4 h-4 fill-current">
+                    <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+            {children}
+          </div>
+        </div>
+      </Transition>
+    </>
+  );
+}
+
+export default ModalCookies;

src/components/ModalSearch.jsx

@@ -0,0 +1,197 @@
+import React, { useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Transition from '../utils/Transition';
+
+function ModalSearch({
+  id,
+  searchId,
+  modalOpen,
+  setModalOpen
+}) {
+
+  const modalContent = useRef(null);
+  const searchInput = useRef(null);
+
+  // close on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }) => {
+      if (!modalOpen || modalContent.current.contains(target)) return
+      setModalOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }) => {
+      if (!modalOpen || keyCode !== 27) return;
+      setModalOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  useEffect(() => {
+    modalOpen && searchInput.current.focus();
+  }, [modalOpen]);
+
+  return (
+    <>
+      {/* Modal backdrop */}
+      <Transition
+        className="fixed inset-0 bg-slate-900 bg-opacity-30 z-50 transition-opacity"
+        show={modalOpen}
+        enter="transition ease-out duration-200"
+        enterStart="opacity-0"
+        enterEnd="opacity-100"
+        leave="transition ease-out duration-100"
+        leaveStart="opacity-100"
+        leaveEnd="opacity-0"
+        aria-hidden="true"
+      />
+      {/* Modal dialog */}
+      <Transition
+        id={id}
+        className="fixed inset-0 z-50 overflow-hidden flex items-start top-20 mb-4 justify-center transform px-4 sm:px-6"
+        role="dialog"
+        aria-modal="true"
+        show={modalOpen}
+        enter="transition ease-in-out duration-200"
+        enterStart="opacity-0 translate-y-4"
+        enterEnd="opacity-100 translate-y-0"
+        leave="transition ease-in-out duration-200"
+        leaveStart="opacity-100 translate-y-0"
+        leaveEnd="opacity-0 translate-y-4"
+      >
+        <div ref={modalContent} className="bg-white overflow-auto max-w-2xl w-full max-h-full rounded shadow-lg">
+          {/* Search form */}
+          <form className="border-b border-slate-200">
+            <div className="relative">
+              <label htmlFor={searchId} className="sr-only">Search</label>
+              <input id={searchId} className="w-full border-0 focus:ring-transparent placeholder-slate-400 appearance-none py-3 pl-10 pr-4" type="search" placeholder="Search Anything…" ref={searchInput} />
+              <button className="absolute inset-0 right-auto group" type="submit" aria-label="Search">
+                <svg className="w-4 h-4 shrink-0 fill-current text-slate-400 group-hover:text-slate-500 ml-4 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
+                  <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
+                </svg>
+              </button>
+            </div>
+          </form>
+          <div className="py-4 px-2">
+            {/* Recent searches */}
+            <div className="mb-3 last:mb-0">
+              <div className="text-xs font-semibold text-slate-400 uppercase px-2 mb-2">Recent searches</div>
+              <ul className="text-sm">
+                <li>
+                  <Link
+                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
+                    to="#0"
+                    onClick={() => setModalOpen(!modalOpen)}
+                  >
+                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
+                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
+                    </svg>
+                    <span>Form Builder - 23 hours on-demand video</span>
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
+                    to="#0"
+                    onClick={() => setModalOpen(!modalOpen)}
+                  >
+                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
+                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
+                    </svg>
+                    <span>Access Mosaic on mobile and TV</span>
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
+                    to="#0"
+                    onClick={() => setModalOpen(!modalOpen)}
+                  >
+                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
+                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
+                    </svg>
+                    <span>Product Update - Q4 2021</span>
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
+                    to="#0"
+                    onClick={() => setModalOpen(!modalOpen)}
+                  >
+                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
+                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
+                    </svg>
+                    <span>Master Digital Marketing Strategy course</span>
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
+                    to="#0"
+                    onClick={() => setModalOpen(!modalOpen)}
+                  >
+                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
+                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
+                    </svg>
+                    <span>Dedicated forms for products</span>
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
+                    to="#0"
+                    onClick={() => setModalOpen(!modalOpen)}
+                  >
+                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
+                      <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
+                    </svg>
+                    <span>Product Update - Q4 2021</span>
+                  </Link>
+                </li>
+              </ul>
+            </div>
+            {/* Recent pages */}
+            <div className="mb-3 last:mb-0">
+              <div className="text-xs font-semibold text-slate-400 uppercase px-2 mb-2">Recent pages</div>
+              <ul className="text-sm">
+                <li>
+                  <Link
+                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
+                    to="#0"
+                    onClick={() => setModalOpen(!modalOpen)}
+                  >
+                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
+                      <path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
+                    </svg>
+                    <span><span className="font-medium text-slate-800 group-hover:text-white">Messages</span> - Conversation / … / Mike Mills</span>
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    className="flex items-center p-2 text-slate-800 hover:text-white hover:bg-indigo-500 rounded group"
+                    to="#0"
+                    onClick={() => setModalOpen(!modalOpen)}
+                  >
+                    <svg className="w-4 h-4 fill-current text-slate-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
+                      <path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
+                    </svg>
+                    <span><span className="font-medium text-slate-800 group-hover:text-white">Messages</span> - Conversation / … / Eva Patrick</span>
+                  </Link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </>
+  );
+}
+
+export default ModalSearch;

src/components/Notification.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+function Notification({
+  children,
+  className,
+  type,
+  open,
+  setOpen
+}) {
+
+  const typeIcon = (type) => {
+    switch (type) {
+      case 'warning':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current text-amber-500 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current text-rose-500 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
+          </svg>
+        );
+      case 'success':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current text-emerald-500 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <>
+      {open &&
+        <div className={className}>
+          <div className="inline-flex flex-col max-w-lg px-4 py-2 rounded-sm text-sm bg-white shadow-lg border border-slate-200 text-slate-600">
+            <div className="flex w-full justify-between items-start">
+              <div className="flex">
+                {typeIcon(type)}
+                <div>
+                  {children}
+                </div>
+              </div>
+              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
+                <div className="sr-only">Close</div>
+                <svg className="w-4 h-4 fill-current">
+                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                </svg>
+              </button>
+            </div>
+            <div className="text-right mt-1">
+              <a className="font-medium text-indigo-500 hover:text-indigo-600" href="#0">Action -&gt;</a>
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  );
+}
+
+export default Notification;

src/components/PaginationClassic.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+function PaginationClassic() {
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+      <nav className="mb-4 sm:mb-0 sm:order-1" role="navigation" aria-label="Navigation">
+        <ul className="flex justify-center">
+          <li className="ml-3 first:ml-0">
+            <a className="btn bg-white border-slate-200 text-slate-300 cursor-not-allowed" href="#0" disabled>&lt;- Previous</a>
+          </li>
+          <li className="ml-3 first:ml-0">
+            <a className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500" href="#0">Next -&gt;</a>
+          </li>
+        </ul>
+      </nav>
+      <div className="text-sm text-slate-500 text-center sm:text-left">
+        Showing <span className="font-medium text-slate-600">1</span> to <span className="font-medium text-slate-600">10</span> of <span className="font-medium text-slate-600">467</span> results
+      </div>
+    </div>
+  );
+}
+
+export default PaginationClassic;

src/components/PaginationNumeric.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+function PaginationNumeric() {
+  return (
+    <div className="flex justify-center">
+      <nav className="flex" role="navigation" aria-label="Navigation">
+        <div className="mr-2">
+          <span className="inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white border border-slate-200 text-slate-300">
+            <span className="sr-only">Previous</span><wbr />
+            <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
+              <path d="M9.4 13.4l1.4-1.4-4-4 4-4-1.4-1.4L4 8z" />
+            </svg>
+          </span>
+        </div>
+        <ul className="inline-flex text-sm font-medium -space-x-px shadow-sm">
+          <li>
+            <span className="inline-flex items-center justify-center rounded-l leading-5 px-3.5 py-2 bg-white border border-slate-200 text-indigo-500">1</span>
+          </li>
+          <li>
+            <a className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">2</a>
+          </li>
+          <li>
+            <a className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">3</a>
+          </li>
+          <li>
+            <span className="inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white border border-slate-200 text-slate-400">…</span>
+          </li>
+          <li>
+            <a className="inline-flex items-center justify-center rounded-r leading-5 px-3.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white" href="#0">9</a>
+          </li>
+        </ul>
+        <div className="ml-2">
+          <a href="#0" className="inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white shadow-sm">
+            <span className="sr-only">Next</span><wbr />
+            <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
+              <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
+            </svg>
+          </a>
+        </div>
+      </nav>
+    </div>
+  );
+}
+
+export default PaginationNumeric;

src/components/PaginationNumeric2.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+function PaginationNumeric2() {
+  return (
+    <div>
+      <nav className="flex justify-between" role="navigation" aria-label="Navigation">
+        <div className="flex-1 mr-2">
+          <a className="btn bg-white border-slate-200 text-slate-300 cursor-not-allowed" href="#0" disabled>&lt;-<span className="hidden sm:inline">&nbsp;Previous</span></a>
+        </div>
+        <div className="grow text-center">
+          <ul className="inline-flex text-sm font-medium -space-x-px">
+            <li>
+              <span className="inline-flex items-center justify-center rounded-full leading-5 px-2 py-2 bg-white border border-slate-200 text-indigo-500 shadow-sm"><span className="w-5">1</span></span>
+            </li>
+            <li>
+              <a className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">2</span></a>
+            </li>
+            <li>
+              <a className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">3</span></a>
+            </li>
+            <li>
+              <span className="inline-flex items-center justify-center leading-5 px-2 py-2 text-slate-400">…</span>
+            </li>
+            <li>
+              <a className="inline-flex items-center justify-center rounded-r leading-5 px-2 py-2 text-slate-600 hover:text-indigo-500 border border-transparent" href="#0"><span className="w-5">9</span></a>
+            </li>
+          </ul>
+        </div>
+        <div className="flex-1 text-right ml-2">
+          <a className="btn bg-white border-slate-200 hover:border-slate-300 text-indigo-500" href="#0"><span className="hidden sm:inline">Next&nbsp;</span>-&gt;</a>
+        </div>
+      </nav>
+    </div>
+  );
+}
+
+export default PaginationNumeric2;

src/components/Toast.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+function Toast({
+  children,
+  className,
+  type,
+  open,
+  setOpen
+}) {
+
+  const typeIcon = (type) => {
+    switch (type) {
+      case 'warning':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
+          </svg>
+        );
+      case 'success':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
+          </svg>
+        );
+    }
+  };
+
+  const typeColor = (type) => {
+    switch (type) {
+      case 'warning':
+        return 'bg-amber-500';
+      case 'error':
+        return 'bg-rose-500';
+      case 'success':
+        return 'bg-emerald-500';
+      default:
+        return 'bg-indigo-500';
+    }
+  };
+
+  return (
+    <>
+      {open &&
+        <div className={className}>
+        <div className={`inline-flex min-w-80 px-4 py-2 rounded-sm text-sm text-white ${typeColor(type)}`}>
+            <div className="flex w-full justify-between items-start">
+              <div className="flex">
+                {typeIcon(type)}
+                <div className="font-medium">
+                {children}
+                </div>
+              </div>
+              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
+                <div className="sr-only">Close</div>
+                <svg className="w-4 h-4 fill-current">
+                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  );
+}
+
+export default Toast;

src/components/Toast2.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+function Toast2({
+  children,
+  className,
+  type,
+  open,
+  setOpen
+}) {
+
+  const typeIcon = (type) => {
+    switch (type) {
+      case 'warning':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
+          </svg>
+        );
+      case 'success':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current opacity-80 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
+          </svg>
+        );
+    }
+  };
+
+  const typeColor = (type) => {
+    switch (type) {
+      case 'warning':
+        return 'bg-amber-100 border-amber-200 text-amber-600';
+      case 'error':
+        return 'bg-rose-100 border-rose-200 text-rose-600';
+      case 'success':
+        return 'bg-emerald-100 border-emerald-200 text-emerald-600';
+      default:
+        return 'bg-indigo-100 border-indigo-200 text-indigo-500';
+    }
+  };
+
+  return (
+    <>
+      {open &&
+        <div className={className}>
+          <div className={`inline-flex min-w-80 px-4 py-2 rounded-sm text-sm border ${typeColor(type)}`}>
+            <div className="flex w-full justify-between items-start">
+              <div className="flex">
+                {typeIcon(type)}
+                <div>
+                  {children}
+                </div>
+              </div>
+              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
+                <div className="sr-only">Close</div>
+                <svg className="w-4 h-4 fill-current">
+                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  );
+}
+
+export default Toast2;

src/components/Toast3.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+function Toast3({
+  children,
+  className,
+  type,
+  open,
+  setOpen
+}) {
+
+  const typeIcon = (type) => {
+    switch (type) {
+      case 'warning':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current text-amber-500 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+          </svg>
+        );
+      case 'error':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current text-rose-500 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z" />
+          </svg>
+        );
+      case 'success':
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current text-emerald-500 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 shrink-0 fill-current text-indigo-500 mt-[3px] mr-3" viewBox="0 0 16 16">
+            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm1 12H7V7h2v5zM8 6c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" />
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <>
+      {open &&
+        <div className={className}>
+          <div className="inline-flex min-w-80 px-4 py-2 rounded-sm text-sm bg-white shadow-lg border border-slate-200 text-slate-600">
+            <div className="flex w-full justify-between items-start">
+              <div className="flex">
+                {typeIcon(type)}
+                <div>
+                {children}
+                </div>
+              </div>
+              <button className="opacity-70 hover:opacity-80 ml-3 mt-[3px]" onClick={() => setOpen(false)}>
+                <div className="sr-only">Close</div>
+                <svg className="w-4 h-4 fill-current">
+                  <path d="M7.95 6.536l4.242-4.243a1 1 0 111.415 1.414L9.364 7.95l4.243 4.242a1 1 0 11-1.415 1.415L7.95 9.364l-4.243 4.243a1 1 0 01-1.414-1.415L6.536 7.95 2.293 3.707a1 1 0 011.414-1.414L7.95 6.536z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      }
+    </>
+  );
+}
+
+export default Toast3;

src/components/Tooltip.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import Transition from '../utils/Transition';
+
+function Tooltip({
+  children,
+  className,
+  bg,
+  size,
+  position,
+}) {
+
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+
+  const positionOuterClasses = (position) => {
+    switch (position) {
+      case 'right':
+        return 'left-full top-1/2 transform -translate-y-1/2';
+      case 'left':
+        return 'right-full top-1/2 transform -translate-y-1/2';
+      case 'bottom':
+        return 'top-full left-1/2 transform -translate-x-1/2';
+      default:
+        return 'bottom-full left-1/2 transform -translate-x-1/2';
+    }
+  }
+
+  const sizeClasses = (size) => {
+    switch (size) {
+      case 'lg':
+        return 'min-w-72  p-3';
+      case 'md':
+        return 'min-w-56 p-3';
+      case 'sm':
+        return 'min-w-44 p-2';
+      default:
+        return 'p-2';
+    }
+  };
+
+  const positionInnerClasses = (position) => {
+    switch (position) {
+      case 'right':
+        return 'ml-2';
+      case 'left':
+        return 'mr-2';
+      case 'bottom':
+        return 'mt-2';
+      default:
+        return 'mb-2';
+    }
+  };
+
+  return (
+    <div
+      className={`relative ${className}`}
+      onMouseEnter={() => setTooltipOpen(true)}
+      onMouseLeave={() => setTooltipOpen(false)}
+      onFocus={() => setTooltipOpen(true)}
+      onBlur={() => setTooltipOpen(false)}
+    >
+      <button
+        className="block"
+        aria-haspopup="true"
+        aria-expanded={tooltipOpen}
+        onClick={(e) => e.preventDefault()}
+      >
+        <svg className="w-4 h-4 fill-current text-slate-400" viewBox="0 0 16 16">
+          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 12c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm1-3H7V4h2v5z" />
+        </svg>
+      </button>
+      <div className={`z-10 absolute ${positionOuterClasses(position)}`}>
+        <Transition
+          show={tooltipOpen}
+          tag="div"
+          className={`rounded overflow-hidden ${bg === 'dark' ? 'bg-slate-800' : 'bg-white border border-slate-200 shadow-lg'} ${sizeClasses(size)} ${positionInnerClasses(position)}`}
+          enter="transition ease-out duration-200 transform"
+          enterStart="opacity-0 -translate-y-2"
+          enterEnd="opacity-100 translate-y-0"
+          leave="transition ease-out duration-200"
+          leaveStart="opacity-100"
+          leaveEnd="opacity-0"
+        >
+          {children}
+        </Transition>
+      </div>
+    </div>
+  );
+}
+
+export default Tooltip;