official_revision/src/views/Chat.vue

<template>
  <div>
    <div class="intro-y flex flex-col sm:flex-row items-center mt-8">
      <h2 class="text-lg font-medium mr-auto">Chat</h2>
      <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
        <button class="button text-white bg-theme-1 shadow-md mr-2">
          Start New Chat
        </button>
        <div class="dropdown ml-auto sm:ml-0">
          <button
            class="dropdown-toggle button px-2 box text-gray-700"
          >
            <span class="w-5 h-5 flex items-center justify-center">
              <PlusIcon class="w-4 h-4" />
            </span>
          </button>
          <div class="dropdown-box w-40">
            <div class="dropdown-box__content box p-2">
              <a
                href=""
                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
              >
                <UsersIcon class="w-4 h-4 mr-2" /> Create Group
              </a>
              <a
                href=""
                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
              >
                <SettingsIcon class="w-4 h-4 mr-2" /> Settings
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="intro-y chat grid grid-cols-12 gap-5 mt-5">
      <!-- BEGIN: Chat Side Menu -->
      <div class="col-span-12 lg:col-span-4 xxl:col-span-3">
        <div class="intro-y pr-1">
          <div class="box p-2">
            <div class="chat__tabs nav-tabs justify-center flex">
              <a
                data-toggle="tab"
                data-target="#chats"
                href="javascript:;"
                class="flex-1 py-2 rounded-md text-center active"
                >Chats</a
              >
              <a
                data-toggle="tab"
                data-target="#friends"
                href="javascript:;"
                class="flex-1 py-2 rounded-md text-center"
                >Friends</a
              >
              <a
                data-toggle="tab"
                data-target="#profile"
                href="javascript:;"
                class="flex-1 py-2 rounded-md text-center"
                >Profile</a
              >
            </div>
          </div>
        </div>
        <div class="tab-content">
          <div id="chats" class="tab-content__pane active">
            <div class="pr-1">
              <div class="box px-5 pt-5 pb-5 lg:pb-0 mt-5">
                <div class="relative text-gray-700">
                  <input
                    type="text"
                    class="input input--lg w-full bg-gray-200 pr-10 placeholder-theme-13"
                    placeholder="Search for messages or users..."
                  />
                  <SearchIcon
                    class="w-4 h-4 hidden sm:absolute my-auto inset-y-0 mr-3 right-0"
                  />
                </div>
                <div class="overflow-x-auto scrollbar-hidden">
                  <div class="flex mt-5">
                    <a
                      v-for="(faker, fakerKey) in $_.take($f(), 10)"
                      :key="fakerKey"
                      href=""
                      class="w-10 mr-4 cursor-pointer"
                    >
                      <div class="w-10 h-10 flex-none image-fit rounded-full">
                        <img
                          alt=""
                          class="rounded-full"
                          :src="require(`@/assets/images/${faker.photos[0]}`)"
                        />
                        <div
                          class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
                        ></div>
                      </div>
                      <div
                        class="text-xs text-gray-600 truncate text-center mt-2"
                      >
                        {{ faker.users[0].name }}
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="chat__chat-list overflow-y-auto scrollbar-hidden pr-1 pt-1 mt-4"
            >
              <div
                v-for="(faker, fakerKey) in $_.take($f(), 10)"
                :key="fakerKey"
                class="intro-x cursor-pointer box relative flex items-center p-5"
                :class="{ 'mt-5': fakerKey }"
                @click="showChatBox"
              >
                <div class="w-12 h-12 flex-none image-fit mr-1">
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${faker.photos[0]}`)"
                  />
                  <div
                    class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
                  ></div>
                </div>
                <div class="ml-2 overflow-hidden">
                  <div class="flex items-center">
                    <a href="javascript:;" class="font-medium">{{
                      faker.users[0].name
                    }}</a>
                    <div class="text-xs text-gray-500 ml-auto">
                      {{ faker.times[0] }}
                    </div>
                  </div>
                  <div class="w-full truncate text-gray-600">
                    {{ faker.news[0].short_content }}
                  </div>
                </div>
                <div
                  v-if="faker.true_false[0]"
                  class="w-5 h-5 flex items-center justify-center absolute top-0 right-0 text-xs text-white rounded-full bg-theme-1 font-medium -mt-1 -mr-1"
                >
                  {{ faker.notification_count }}
                </div>
              </div>
            </div>
          </div>
          <div id="friends" class="tab-content__pane">
            <div class="pr-1">
              <div class="box p-5 mt-5">
                <div class="relative text-gray-700">
                  <input
                    type="text"
                    class="input input--lg w-full bg-gray-200 pr-10 placeholder-theme-13"
                    placeholder="Search for messages or users..."
                  />
                  <SearchIcon
                    class="w-4 h-4 hidden sm:absolute my-auto inset-y-0 mr-3 right-0"
                  />
                </div>
                <button
                  type="button"
                  class="button w-full bg-theme-1 text-white mt-3"
                >
                  Invite Friends
                </button>
              </div>
            </div>
            <div
              class="chat__user-list overflow-y-auto scrollbar-hidden pr-1 pt-1"
            >
              <div class="mt-4 text-gray-600">A</div>
              <div
                class="cursor-pointer box relative flex items-center p-5 mt-5"
              >
                <div class="w-12 h-12 flex-none image-fit mr-1">
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
                  />
                  <div
                    class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
                  ></div>
                </div>
                <div class="ml-2 overflow-hidden">
                  <div class="flex items-center">
                    <a href="" class="font-medium">{{
                      $f()[0].users[0].name
                    }}</a>
                  </div>
                  <div class="w-full truncate text-gray-600">
                    Last seen 2 hours ago
                  </div>
                </div>
                <div class="dropdown ml-auto">
                  <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                    <MoreHorizontalIcon
                      class="w-5 h-5 text-gray-700"
                    />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <Share2Icon class="w-4 h-4 mr-2" />
                        Share Contact
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="cursor-pointer box relative flex items-center p-5 mt-5"
              >
                <div class="w-12 h-12 flex-none image-fit mr-1">
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[1].photos[0]}`)"
                  />
                  <div
                    class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
                  ></div>
                </div>
                <div class="ml-2 overflow-hidden">
                  <div class="flex items-center">
                    <a href="" class="font-medium">{{
                      $f()[1]["users"][0]["name"]
                    }}</a>
                  </div>
                  <div class="w-full truncate text-gray-600">
                    Last seen 2 hours ago
                  </div>
                </div>
                <div class="dropdown ml-auto">
                  <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                    <MoreHorizontalIcon
                      class="w-5 h-5 text-gray-700"
                    />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <Share2Icon class="w-4 h-4 mr-2" />
                        Share Contact
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="mt-4 text-gray-600">B</div>
              <div
                class="cursor-pointer box relative flex items-center p-5 mt-5"
              >
                <div class="w-12 h-12 flex-none image-fit mr-1">
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[2].photos[0]}`)"
                  />
                  <div
                    class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
                  ></div>
                </div>
                <div class="ml-2 overflow-hidden">
                  <div class="flex items-center">
                    <a href="" class="font-medium">{{
                      $f()[2]["users"][0]["name"]
                    }}</a>
                  </div>
                  <div class="w-full truncate text-gray-600">
                    Last seen 2 hours ago
                  </div>
                </div>
                <div class="dropdown ml-auto">
                  <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                    <MoreHorizontalIcon
                      class="w-5 h-5 text-gray-700"
                    />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <Share2Icon class="w-4 h-4 mr-2" />
                        Share Contact
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="cursor-pointer box relative flex items-center p-5 mt-5"
              >
                <div class="w-12 h-12 flex-none image-fit mr-1">
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[3].photos[0]}`)"
                  />
                  <div
                    class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
                  ></div>
                </div>
                <div class="ml-2 overflow-hidden">
                  <div class="flex items-center">
                    <a href="" class="font-medium">{{
                      $f()[3]["users"][0]["name"]
                    }}</a>
                  </div>
                  <div class="w-full truncate text-gray-600">
                    Last seen 2 hours ago
                  </div>
                </div>
                <div class="dropdown ml-auto">
                  <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                    <MoreHorizontalIcon
                      class="w-5 h-5 text-gray-700"
                    />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <Share2Icon class="w-4 h-4 mr-2" />
                        Share Contact
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="cursor-pointer box relative flex items-center p-5 mt-5"
              >
                <div class="w-12 h-12 flex-none image-fit mr-1">
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[4].photos[0]}`)"
                  />
                  <div
                    class="w-3 h-3 bg-theme-9 absolute right-0 bottom-0 rounded-full border-2 border-white"
                  ></div>
                </div>
                <div class="ml-2 overflow-hidden">
                  <div class="flex items-center">
                    <a href="" class="font-medium">{{
                      $f()[4]["users"][0]["name"]
                    }}</a>
                  </div>
                  <div class="w-full truncate text-gray-600">
                    Last seen 2 hours ago
                  </div>
                </div>
                <div class="dropdown ml-auto">
                  <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                    <MoreHorizontalIcon
                      class="w-5 h-5 text-gray-700"
                    />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <Share2Icon class="w-4 h-4 mr-2" />
                        Share Contact
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="profile" class="tab-content__pane">
            <div class="pr-1">
              <div class="box px-5 py-10 mt-5">
                <div
                  class="w-20 h-20 flex-none image-fit rounded-full overflow-hidden mx-auto"
                >
                  <img
                    alt=""
                    :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
                  />
                </div>
                <div class="text-center mt-3">
                  <div class="font-medium text-lg">
                    {{ $f()[0]["users"][0]["name"] }}
                  </div>
                  <div class="text-gray-600 mt-1">
                    Tailwind HTML Admin Template
                  </div>
                </div>
              </div>
              <div class="box p-5 mt-5">
                <div class="flex items-center border-b pb-5">
                  <div class="">
                    <div class="text-gray-600">Country</div>
                    <div>New York City, USA</div>
                  </div>
                  <GlobeIcon class="w-4 h-4 text-gray-600 ml-auto" />
                </div>
                <div class="flex items-center border-b py-5">
                  <div class="">
                    <div class="text-gray-600">Phone</div>
                    <div>+32 19 23 62 24 34</div>
                  </div>
                  <MicIcon class="w-4 h-4 text-gray-600 ml-auto" />
                </div>
                <div class="flex items-center border-b py-5">
                  <div class="">
                    <div class="text-gray-600">Email</div>
                    <div>{{ $f()[0]["users"][0]["email"] }}</div>
                  </div>
                  <MailIcon class="w-4 h-4 text-gray-600 ml-auto" />
                </div>
                <div class="flex items-center pt-5">
                  <div class="">
                    <div class="text-gray-600">Joined Date</div>
                    <div>{{ $f()[0]["dates"][0] }}</div>
                  </div>
                  <ClockIcon class="w-4 h-4 text-gray-600 ml-auto" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- END: Chat Side Menu -->
      <!-- BEGIN: Chat Content -->
      <div class="intro-y col-span-12 lg:col-span-8 xxl:col-span-9">
        <div class="chat__box box">
          <!-- BEGIN: Chat Active -->
          <div v-if="chatBox" class="h-full flex flex-col">
            <div
              class="flex flex-col sm:flex-row border-b border-gray-200 px-5 py-4"
            >
              <div class="flex items-center">
                <div
                  class="w-10 h-10 sm:w-12 sm:h-12 flex-none image-fit relative"
                >
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
                  />
                </div>
                <div class="ml-3 mr-auto">
                  <div class="font-medium text-base">
                    {{ $f()[0]["users"][0]["name"] }}
                  </div>
                  <div class="text-gray-600 text-xs sm:text-sm">
                    Hey, I am using chat <span class="mx-1">•</span> Online
                  </div>
                </div>
              </div>
              <div
                class="flex items-center sm:ml-auto mt-5 sm:mt-0 border-t sm:border-0 border-gray-200 pt-3 sm:pt-0 -mx-5 sm:mx-0 px-5 sm:px-0"
              >
                <a href="javascript:;" class="w-5 h-5 text-gray-500">
                  <SearchIcon class="w-5 h-5" />
                </a>
                <a href="javascript:;" class="w-5 h-5 text-gray-500 ml-5">
                  <UserPlusIcon class="w-5 h-5" />
                </a>
                <div class="dropdown ml-auto sm:ml-3">
                  <a
                    href="javascript:;"
                    class="dropdown-toggle w-5 h-5 text-gray-500"
                  >
                    <MoreVerticalIcon class="w-5 h-5" />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <Share2Icon class="w-4 h-4 mr-2" />
                        Share Contact
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <SettingsIcon class="w-4 h-4 mr-2" />
                        Settings
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="overflow-y-scroll scrollbar-hidden px-5 pt-5 flex-1">
              <div class="chat__box__text-box flex items-end float-left mb-4">
                <div
                  class="w-10 h-10 hidden sm:block flex-none image-fit relative mr-5"
                >
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
                  />
                </div>
                <div
                  class="bg-gray-200 px-4 py-3 text-gray-700 rounded-r-md rounded-t-md"
                >
                  Lorem ipsum sit amen dolor, lorem ipsum sit amen dolor
                  <div class="mt-1 text-xs text-gray-600">2 mins ago</div>
                </div>
                <div class="hidden sm:block dropdown ml-3 my-auto">
                  <a
                    href="javascript:;"
                    class="dropdown-toggle w-4 h-4 text-gray-500"
                  >
                    <MoreVerticalIcon class="w-4 h-4" />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                        Reply
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <TrashIcon class="w-4 h-4 mr-2" /> Delete
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="clear-both"></div>
              <div class="chat__box__text-box flex items-end float-right mb-4">
                <div class="hidden sm:block dropdown mr-3 my-auto">
                  <a
                    href="javascript:;"
                    class="dropdown-toggle w-4 h-4 text-gray-500"
                  >
                    <MoreVerticalIcon class="w-4 h-4" />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                        Reply
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <TrashIcon class="w-4 h-4 mr-2" /> Delete
                      </a>
                    </div>
                  </div>
                </div>
                <div
                  class="bg-theme-1 px-4 py-3 text-white rounded-l-md rounded-t-md"
                >
                  Lorem ipsum sit amen dolor, lorem ipsum sit amen dolor
                  <div class="mt-1 text-xs text-theme-25">1 mins ago</div>
                </div>
                <div
                  class="w-10 h-10 hidden sm:block flex-none image-fit relative ml-5"
                >
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[1].photos[0]}`)"
                  />
                </div>
              </div>
              <div class="clear-both"></div>
              <div class="chat__box__text-box flex items-end float-right mb-4">
                <div class="hidden sm:block dropdown mr-3 my-auto">
                  <a
                    href="javascript:;"
                    class="dropdown-toggle w-4 h-4 text-gray-500"
                  >
                    <MoreVerticalIcon class="w-4 h-4" />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                        Reply
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <TrashIcon class="w-4 h-4 mr-2" /> Delete
                      </a>
                    </div>
                  </div>
                </div>
                <div
                  class="bg-theme-1 px-4 py-3 text-white rounded-l-md rounded-t-md"
                >
                  Lorem ipsum sit amen dolor, lorem ipsum sit amen dolor
                  <div class="mt-1 text-xs text-theme-25">59 secs ago</div>
                </div>
                <div
                  class="w-10 h-10 hidden sm:block flex-none image-fit relative ml-5"
                >
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[1].photos[0]}`)"
                  />
                </div>
              </div>
              <div class="clear-both"></div>
              <div
                class="text-gray-500 text-xs text-center mb-10 mt-5"
              >
                12 June 2020
              </div>
              <div class="chat__box__text-box flex items-end float-left mb-4">
                <div
                  class="w-10 h-10 hidden sm:block flex-none image-fit relative mr-5"
                >
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
                  />
                </div>
                <div
                  class="bg-gray-200 px-4 py-3 text-gray-700 rounded-r-md rounded-t-md"
                >
                  Lorem ipsum sit amen dolor, lorem ipsum sit amen dolor
                  <div class="mt-1 text-xs text-gray-600">10 secs ago</div>
                </div>
                <div class="hidden sm:block dropdown ml-3 my-auto">
                  <a
                    href="javascript:;"
                    class="dropdown-toggle w-4 h-4 text-gray-500"
                  >
                    <MoreVerticalIcon class="w-4 h-4" />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                        Reply
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <TrashIcon class="w-4 h-4 mr-2" /> Delete
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="clear-both"></div>
              <div class="chat__box__text-box flex items-end float-right mb-4">
                <div class="hidden sm:block dropdown mr-3 my-auto">
                  <a
                    href="javascript:;"
                    class="dropdown-toggle w-4 h-4 text-gray-500"
                  >
                    <MoreVerticalIcon class="w-4 h-4" />
                  </a>
                  <div class="dropdown-box w-40">
                    <div class="dropdown-box__content box p-2">
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                        Reply
                      </a>
                      <a
                        href=""
                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                      >
                        <TrashIcon class="w-4 h-4 mr-2" /> Delete
                      </a>
                    </div>
                  </div>
                </div>
                <div
                  class="bg-theme-1 px-4 py-3 text-white rounded-l-md rounded-t-md"
                >
                  Lorem ipsum
                  <div class="mt-1 text-xs text-theme-25">1 secs ago</div>
                </div>
                <div
                  class="w-10 h-10 hidden sm:block flex-none image-fit relative ml-5"
                >
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[1].photos[0]}`)"
                  />
                </div>
              </div>
              <div class="clear-both"></div>
              <div class="chat__box__text-box flex items-end float-left mb-4">
                <div
                  class="w-10 h-10 hidden sm:block flex-none image-fit relative mr-5"
                >
                  <img
                    alt=""
                    class="rounded-full"
                    :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
                  />
                </div>
                <div
                  class="bg-gray-200 px-4 py-3 text-gray-700 rounded-r-md rounded-t-md"
                >
                  {{ $f()[0]["users"][0]["name"] }} is typing
                  <span class="typing-dots ml-1">
                    <span>.</span>
                    <span>.</span>
                    <span>.</span>
                  </span>
                </div>
              </div>
            </div>
            <div
              class="pt-4 pb-10 sm:py-4 flex items-center border-t border-gray-200"
            >
              <textarea
                class="chat__box__input input w-full h-16 resize-none border-transparent px-5 py-3 focus:shadow-none"
                rows="1"
                placeholder="Type your message..."
              ></textarea>
              <div
                class="flex absolute sm:static left-0 bottom-0 ml-5 sm:ml-0 mb-5 sm:mb-0"
              >
                <div class="dropdown mr-3 sm:mr-5">
                  <a
                    href="javascript:;"
                    class="dropdown-toggle w-4 h-4 sm:w-5 sm:h-5 block text-gray-500"
                  >
                    <SmileIcon class="w-full h-full" />
                  </a>
                  <div class="chat-dropdown dropdown-box w-40 pb-2">
                    <div class="dropdown-box__content">
                      <div
                        class="chat-dropdown__box box flex flex-col pb-3 -mt-2"
                      >
                        <div class="px-3 pt-3">
                          <div
                            class="relative text-gray-700"
                          >
                            <input
                              type="text"
                              class="input w-full bg-gray-200 pr-10 placeholder-theme-13"
                              placeholder="Search emojis..."
                            />
                            <SearchIcon
                              class="w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0"
                            />
                          </div>
                        </div>
                        <div
                          class="chat-dropdown__box__tabs nav-tabs flex px-3 mt-5"
                        >
                          <a
                            data-toggle="tab"
                            data-target="#history"
                            href="javascript:;"
                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                          >
                            <svg
                              class="w-4 h-4"
                              role="img"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 512 512"
                            >
                              <path
                                fill="currentColor"
                                d="M504 255.531c.253 136.64-111.18 248.372-247.82 248.468-59.015.042-113.223-20.53-155.822-54.911-11.077-8.94-11.905-25.541-1.839-35.607l11.267-11.267c8.609-8.609 22.353-9.551 31.891-1.984C173.062 425.135 212.781 440 256 440c101.705 0 184-82.311 184-184 0-101.705-82.311-184-184-184-48.814 0-93.149 18.969-126.068 49.932l50.754 50.754c10.08 10.08 2.941 27.314-11.313 27.314H24c-8.837 0-16-7.163-16-16V38.627c0-14.254 17.234-21.393 27.314-11.314l49.372 49.372C129.209 34.136 189.552 8 256 8c136.81 0 247.747 110.78 248 247.531zm-180.912 78.784l9.823-12.63c8.138-10.463 6.253-25.542-4.21-33.679L288 256.349V152c0-13.255-10.745-24-24-24h-16c-13.255 0-24 10.745-24 24v135.651l65.409 50.874c10.463 8.137 25.541 6.253 33.679-4.21z"
                              ></path>
                            </svg>
                          </a>
                          <a
                            data-toggle="tab"
                            data-target="#smile"
                            href="javascript:;"
                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2 active"
                          >
                            <svg
                              class="w-4 h-4"
                              role="img"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 496 512"
                            >
                              <path
                                fill="currentColor"
                                d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
                              ></path>
                            </svg>
                          </a>
                          <a
                            data-toggle="tab"
                            data-target="#cat"
                            href="javascript:;"
                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                          >
                            <svg
                              class="w-4 h-4"
                              role="img"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 512 512"
                            >
                              <path
                                fill="currentColor"
                                d="M290.59 192c-20.18 0-106.82 1.98-162.59 85.95V192c0-52.94-43.06-96-96-96-17.67 0-32 14.33-32 32s14.33 32 32 32c17.64 0 32 14.36 32 32v256c0 35.3 28.7 64 64 64h176c8.84 0 16-7.16 16-16v-16c0-17.67-14.33-32-32-32h-32l128-96v144c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V289.86c-10.29 2.67-20.89 4.54-32 4.54-61.81 0-113.52-44.05-125.41-102.4zM448 96h-64l-64-64v134.4c0 53.02 42.98 96 96 96s96-42.98 96-96V32l-64 64zm-72 80c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16zm80 0c-8.84 0-16-7.16-16-16s7.16-16 16-16 16 7.16 16 16-7.16 16-16 16z"
                              ></path>
                            </svg>
                          </a>
                          <a
                            data-toggle="tab"
                            data-target="#coffee"
                            href="javascript:;"
                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                          >
                            <svg
                              class="w-4 h-4"
                              role="img"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 640 512"
                            >
                              <path
                                fill="currentColor"
                                d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z"
                              ></path>
                            </svg>
                          </a>
                          <a
                            data-toggle="tab"
                            data-target="#futbol"
                            href="javascript:;"
                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                          >
                            <svg
                              class="w-4 h-4"
                              role="img"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 512 512"
                            >
                              <path
                                fill="currentColor"
                                d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zm-48 0l-.003-.282-26.064 22.741-62.679-58.5 16.454-84.355 34.303 3.072c-24.889-34.216-60.004-60.089-100.709-73.141l13.651 31.939L256 139l-74.953-41.525 13.651-31.939c-40.631 13.028-75.78 38.87-100.709 73.141l34.565-3.073 16.192 84.355-62.678 58.5-26.064-22.741-.003.282c0 43.015 13.497 83.952 38.472 117.991l7.704-33.897 85.138 10.447 36.301 77.826-29.902 17.786c40.202 13.122 84.29 13.148 124.572 0l-29.902-17.786 36.301-77.826 85.138-10.447 7.704 33.897C442.503 339.952 456 299.015 456 256zm-248.102 69.571l-29.894-91.312L256 177.732l77.996 56.527-29.622 91.312h-96.476z"
                              ></path>
                            </svg>
                          </a>
                          <a
                            data-toggle="tab"
                            data-target="#building"
                            href="javascript:;"
                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                          >
                            <svg
                              class="w-4 h-4"
                              role="img"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 448 512"
                            >
                              <path
                                fill="currentColor"
                                d="M128 148v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12zm140 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-128 96h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm128 0h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm-76 84v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm76 12h40c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12zm180 124v36H0v-36c0-6.6 5.4-12 12-12h19.5V24c0-13.3 10.7-24 24-24h337c13.3 0 24 10.7 24 24v440H436c6.6 0 12 5.4 12 12zM79.5 463H192v-67c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v67h112.5V49L80 48l-.5 415z"
                              ></path>
                            </svg>
                          </a>
                          <a
                            data-toggle="tab"
                            data-target="#lightbulb"
                            href="javascript:;"
                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                          >
                            <svg
                              class="w-4 h-4"
                              role="img"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 352 512"
                            >
                              <path
                                fill="currentColor"
                                d="M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z"
                              ></path>
                            </svg>
                          </a>
                          <a
                            data-toggle="tab"
                            data-target="#music"
                            href="javascript:;"
                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                          >
                            <svg
                              class="w-4 h-4"
                              role="img"
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 512 512"
                            >
                              <path
                                fill="currentColor"
                                d="M511.99 32.01c0-21.71-21.1-37.01-41.6-30.51L150.4 96c-13.3 4.2-22.4 16.5-22.4 30.5v261.42c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64V214.31l256-75.02v184.63c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64l-.01-351.99z"
                              ></path>
                            </svg>
                          </a>
                        </div>
                        <div class="tab-content overflow-hidden mt-5">
                          <div id="history" class="h-full tab-content__pane">
                            <div class="font-medium px-3">Recent Emojis</div>
                            <div
                              class="h-full pb-10 px-2 overflow-y-auto scrollbar-hidden mt-2"
                            >
                              <div class="grid grid-cols-8 text-2xl">
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😂
                                </button>
                              </div>
                            </div>
                          </div>
                          <div
                            id="smile"
                            class="h-full tab-content__pane active"
                          >
                            <div class="font-medium px-3">Smileys & People</div>
                            <div
                              class="h-full pb-10 px-2 overflow-y-auto scrollbar-hidden mt-2"
                            >
                              <div class="grid grid-cols-8 text-2xl">
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☺️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☹️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☠️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  😾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;⚕️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;⚕️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🎓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🎓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🏫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🏫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;⚖️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;⚖️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🌾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🌾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🍳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🍳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🔧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🔧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🏭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🏭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;💼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;💼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🔬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🔬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;💻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;💻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🎤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🎤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🎨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🎨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;✈️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;✈️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🚀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🚀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;🚒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;🚒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👮&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👮&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕵️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕵️&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕵️&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💂&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💂&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👷&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👷&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👳&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👳&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👱&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👱&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧙&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧙&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧚&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧚&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧛&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧛&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧜&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧜&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧝&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧝&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧞&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧞&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧟&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧟&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙍&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙍&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙎&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙎&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙅&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙅&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙆&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙆&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💁&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💁&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙋&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙋&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙇&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙇&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤦&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤦&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤷&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤷&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💆&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💆&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💇&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💇&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚶&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚶&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏃&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏃&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👯&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👯&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧖&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧖&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧗&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧗&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧘&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧘&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕴️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗣️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛷️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏌️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏌️&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏌️&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏄&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏄&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚣&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚣&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏊&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏊&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛹️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛹️&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛹️&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏋️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏋️&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏋️&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚴&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚴&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚵&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚵&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏎️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏍️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤸&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤸&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤼&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤼&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤽&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤽&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤾&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤾&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤹&zwj;♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤹&zwj;♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;❤️&zwj;💋&zwj;👨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;❤️&zwj;💋&zwj;👨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;❤️&zwj;💋&zwj;👩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;❤️&zwj;👨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;❤️&zwj;👨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;❤️&zwj;👩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👩&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👩&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👩&zwj;👧&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👩&zwj;👦&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👩&zwj;👧&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👨&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👨&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👨&zwj;👧&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👨&zwj;👦&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👨&zwj;👧&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👩&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👩&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👩&zwj;👧&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👩&zwj;👦&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👩&zwj;👧&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👦&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👧&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👨&zwj;👧&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👦&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👧&zwj;👦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👩&zwj;👧&zwj;👧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☝️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✌️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖐️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✍️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🙏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🤝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👁️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👁️&zwj;🗨️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❤️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❣️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗨️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗯️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕳️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕶️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛍️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  👒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛑️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💎
                                </button>
                              </div>
                            </div>
                          </div>
                          <div id="cat" class="h-full tab-content__pane">
                            <div class="font-medium px-3">Animals & Nature</div>
                            <div
                              class="h-full pb-10 px-2 overflow-y-auto scrollbar-hidden mt-2"
                            >
                              <div class="grid grid-cols-8 text-2xl">
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐿️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕊️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🐞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕷️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕸️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🦂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏵️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☘️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍃
                                </button>
                              </div>
                            </div>
                          </div>
                          <div id="coffee" class="h-full tab-content__pane">
                            <div class="font-medium px-3">Food & Drink</div>
                            <div
                              class="h-full pb-10 px-2 overflow-y-auto scrollbar-hidden mt-2"
                            >
                              <div class="grid grid-cols-8 text-2xl">
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌶️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🧀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍽️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🍴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏺
                                </button>
                              </div>
                            </div>
                          </div>
                          <div id="futbol" class="h-full tab-content__pane">
                            <div class="font-medium px-3">Activities</div>
                            <div
                              class="h-full pb-10 px-2 overflow-y-auto scrollbar-hidden mt-2"
                            >
                              <div class="grid grid-cols-8 text-2xl">
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎗️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎟️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎖️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛸️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕹️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♠️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♥️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♦️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♣️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🃏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🀄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎴
                                </button>
                              </div>
                            </div>
                          </div>
                          <div id="building" class="h-full tab-content__pane">
                            <div class="font-medium px-3">Travel & Places</div>
                            <div
                              class="h-full pb-10 px-2 overflow-y-auto scrollbar-hidden mt-2"
                            >
                              <div class="grid grid-cols-8 text-2xl">
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗺️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏔️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛰️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏕️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏖️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏜️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏝️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏞️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏟️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏛️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏗️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏘️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏙️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏚️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛩️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♨️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖼️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛣️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛤️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛳️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛴️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛥️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✈️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛩️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛰️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛎️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛏️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛋️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⌛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⌚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏱️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏲️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕰️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌡️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⭐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☁️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛈️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌤️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌥️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌦️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌧️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌨️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌩️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌪️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌫️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌬️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛱️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❄️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☃️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☄️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🌊
                                </button>
                              </div>
                            </div>
                          </div>
                          <div id="lightbulb" class="h-full tab-content__pane">
                            <div class="font-medium px-3">Objects</div>
                            <div
                              class="h-full pb-10 px-2 overflow-y-auto scrollbar-hidden mt-2"
                            >
                              <div class="grid grid-cols-8 text-2xl">
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎙️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎚️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎛️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🥁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☎️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖥️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖨️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⌨️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖱️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖲️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎞️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📽️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕯️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗞️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏷️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✉️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📥
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗳️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✏️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✒️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖋️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖊️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖌️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖍️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗒️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗓️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📇
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🖇️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗃️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗄️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗑️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗝️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔨
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛏️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚒️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛠️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗡️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚔️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛡️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚙️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗜️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚗️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚖️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛓️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚰️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚱️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🗿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛢️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛒
                                </button>
                              </div>
                            </div>
                          </div>
                          <div id="music" class="h-full tab-content__pane">
                            <div class="font-medium px-3">Symbols</div>
                            <div
                              class="h-full pb-10 px-2 overflow-y-auto scrollbar-hidden mt-2"
                            >
                              <div class="grid grid-cols-8 text-2xl">
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🏧
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚮
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚠️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚭
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🚷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔞
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☢️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☣️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⬆️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ↗️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ➡️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ↘️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⬇️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ↙️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⬅️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ↖️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ↕️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ↔️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ↩️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ↪️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⤴️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⤵️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔃
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔄
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔝
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🛐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚛️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕉️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✡️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☸️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☯️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✝️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☦️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☪️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☮️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🕎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♈
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♉
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♊
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♋
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♍
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♏
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⛎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔀
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔂
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ▶️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏩
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏭️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏯️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ◀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏮️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔼
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏬
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏸️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏹️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏺️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⏏️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🎦
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔆
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♀️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚕️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ♻️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚜️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔱
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  📛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⭕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✅
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ☑️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✔️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✖️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❌
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ➕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ➖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ➗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ➰
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ➿
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  〽️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✳️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ✴️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❇️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ‼️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⁉️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ❗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  〰️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ©️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ®️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ™️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  #️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  *️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  0️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  1️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  2️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  3️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  4️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  5️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  6️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  7️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  8️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  9️⃣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔟
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔡
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔢
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔣
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔤
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🅰️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆎
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🅱️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆒
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆓
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ℹ️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆔
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  Ⓜ️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆕
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆖
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🅾️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆗
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🅿️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆙
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🆚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈁
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈂️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈷️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈯
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🉐
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈚
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🉑
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ㊗️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ㊙️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🈵
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ▪️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ▫️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ◻️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ◼️
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ◽
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ◾
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⬛
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⬜
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔶
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔷
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔸
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔹
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔺
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔻
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  💠
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔘
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔲
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔳
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚪
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  ⚫
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔴
                                </button>
                                <button
                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                >
                                  🔵
                                </button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="w-4 h-4 sm:w-5 sm:h-5 relative text-gray-500 mr-3 sm:mr-5"
                >
                  <PaperclipIcon class="w-full h-full" />
                  <input
                    type="file"
                    class="w-full h-full top-0 left-0 absolute opacity-0"
                  />
                </div>
              </div>
              <a
                href="javascript:;"
                class="w-8 h-8 sm:w-10 sm:h-10 block bg-theme-1 text-white rounded-full flex-none flex items-center justify-center mr-5"
              >
                <SendIcon class="w-4 h-4" />
              </a>
            </div>
          </div>
          <!-- END: Chat Active -->
          <!-- BEGIN: Chat Default -->
          <div v-else class="h-full flex items-center">
            <div class="mx-auto text-center">
              <div
                class="w-16 h-16 flex-none image-fit rounded-full overflow-hidden mx-auto"
              >
                <img
                  alt=""
                  :src="require(`@/assets/images/${$f()[0].photos[0]}`)"
                />
              </div>
              <div class="mt-3">
                <div class="font-medium">
                  Hey, {{ $f()[0]["users"][0]["name"] }}!
                </div>
                <div class="text-gray-600 mt-1">
                  Please select a chat to start messaging.
                </div>
              </div>
            </div>
          </div>
          <!-- END: Chat Default -->
        </div>
      </div>
      <!-- END: Chat Content -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chatBox: false
    };
  },
  methods: {
    showChatBox() {
      this.chatBox = !this.chatBox;
    }
  }
};
</script>