BookingFlight

<div className="flights-records">
      <div className="grid grid-cols-1 gap-4">
        {[1, 2, 3, 4, 5].map((items, key) => (
          <div key={key} className="border-secondary border-b py-4">
            <div className="border border-gray-400 rounded-2xl p-2 md:p-4 mb-2">
              <div className="grid grid-cols-6 md:grid-cols-5">
                <div className="col-span-2 md:col-span-1 flex flex-col justify-center">
                  <span className="text-secondary font-semibold text-lg md:text-xl">Ida</span>
                  <span className="text-xs md:text-sm font-light">23/07/2021</span>
                  <img src={AaLogo} alt="logo refer" className="object-cover w-full ml-auto block md:hidden" />
                </div>
                <div className="col-span-3 md:col-span-2 flex items-center justify-between">
                  <div className="flex flex-col text-primary">
                    <span className="font-semibold text-lg md:text-xl">11:00</span>
                    <span className="font-light uppercase">VLC</span>
                  </div>

                  <div className="flex flex-col text-primary w-1/2">
                    <span className="font-light text-center text-sm">10h</span>
                    <i className="trip-icon"></i>
                    <span className="font-light text-center text-xs md:text-sm"><span className="text-secondary">1 escala </span>AMS</span>
                  </div>

                  <div className="flex flex-col text-primary">
                    <span className="font-semibold text-lg md:text-xl">21:00</span>
                    <span className="font-light uppercase">OSL</span>
                  </div>
                </div>
                <div className="hidden md:flex items-center justify-center">
                  <img src={AaLogo} alt="logo refer" className="object-cover w-1/2 ml-auto" />
                </div>
                <div className="flex items-center justify-end">
                  <button
                    data-key={key}
                    data-type="exit"
                    className="flex justify-center items-center border border-primary text-primary rounded-full h-7 md:h-10 w-7 md:w-10 transition duration-300 ease-linear hover:border-secondary hover:text-secondary"
                    onClick={e => handleToggleFlight(e)}
                  >
                    {flightType === "exit"
                      ?
                      <FaChevronRight size={20} />
                      :
                      <FaChevronDown size={20} />
                    }
                  </button>
                </div>
                {flightTab === key &&
                  <div className="col-span-6 md:col-span-5">
                    <Transition
                      show={flightType === "exit"}
                      enter="transition ease-out duration-100"
                      enterFrom="transform opacity-0 scale-95"
                      enterTo="transform opacity-100 scale-100"
                      leave="transition ease-in duration-75"
                      leaveFrom="transform opacity-100 scale-100"
                      leaveTo="transform opacity-0 scale-95"
                    >
                      <div className="p-4 md:p-8 text-primary text-xs md:text-base">
                        <div className="flex items-center mb-4 px-4">
                          <span>2h 35m</span>
                          <i className="scale-icon"></i>
                          <div className="flex flex-col">
                            <span>11:00 <b>VLC</b> Valencia</span>
                            <span>12:00 <b>STN</b> Londres Standsted</span>
                          </div>
                        </div>
                        <div className="flex items-center bg-skin text-secondary rounded-full mb-4 px-4">
                          <span>5h 25m</span>
                          <i className="scale-icon invisible"></i>
                          <div className="flex flex-col">
                            <span>Escala en el aeropuerto</span>
                          </div>
                        </div>
                        <div className="flex items-center px-4">
                          <span>2h 35m</span>
                          <i className="scale-icon"></i>
                          <div className="flex flex-col">
                            <span>11:00 <b>VLC</b> Valencia</span>
                            <span>12:00 <b>STN</b> Londres Standsted</span>
                          </div>
                        </div>
                      </div>
                    </Transition>
                  </div>
                }
              </div>
            </div>

            <div className="border border-gray-400 rounded-2xl p-2 md:p-4 mb-2">
              <div className="grid grid-cols-6 md:grid-cols-5">
                <div className="col-span-2 md:col-span-1 flex flex-col justify-center">
                  <span className="text-secondary font-semibold text-lg md:text-xl">Vuelta</span>
                  <span className="text-xs md:text-sm font-light">23/07/2021</span>
                  <img src={AaLogo} alt="logo refer" className="object-cover w-full ml-auto block md:hidden" />
                </div>
                <div className="col-span-3 md:col-span-2 flex items-center justify-between">
                  <div className="flex flex-col text-primary">
                    <span className="font-semibold text-lg md:text-xl">11:00</span>
                    <span className="font-light uppercase">VLC</span>
                  </div>

                  <div className="flex flex-col text-primary w-1/2">
                    <span className="font-light text-center text-sm">10h</span>
                    <i className="trip-icon"></i>
                    <span className="font-light text-center text-xs md:text-sm"><span className="text-secondary">1 escala </span>AMS</span>
                  </div>

                  <div className="flex flex-col text-primary">
                    <span className="font-semibold text-lg md:text-xl">21:00</span>
                    <span className="font-light uppercase">OSL</span>
                  </div>
                </div>
                <div className="hidden md:flex items-center justify-center">
                  <img src={AaLogo} alt="logo refer" className="object-cover w-1/2 ml-auto" />
                </div>
                <div className="flex items-center justify-end">
                  <button
                    data-key={key}
                    data-type="return"
                    className="flex justify-center items-center border border-primary text-primary rounded-full h-7 md:h-10 w-7 md:w-10 transition duration-300 ease-linear hover:border-secondary hover:text-secondary"
                    onClick={e => handleToggleFlight(e)}
                  >
                    {flightType === "return"
                      ?
                      <FaChevronRight size={20} />
                      :
                      <FaChevronDown size={20} />
                    }
                  </button>
                </div>
                {flightTab === key &&
                  <div className="col-span-6 md:col-span-5">
                    <Transition
                      show={flightType === "return"}
                      enter="transition ease-out duration-100"
                      enterFrom="transform opacity-0 scale-95"
                      enterTo="transform opacity-100 scale-100"
                      leave="transition ease-in duration-75"
                      leaveFrom="transform opacity-100 scale-100"
                      leaveTo="transform opacity-0 scale-95"
                    >
                      <div className="p-4 md:p-8 text-primary text-xs md:text-base">
                        <div className="flex items-center mb-4 px-4">
                          <span>2h 35m</span>
                          <i className="scale-icon"></i>
                          <div className="flex flex-col">
                            <span>11:00 <b>VLC</b> Valencia</span>
                            <span>12:00 <b>STN</b> Londres Standsted</span>
                          </div>
                        </div>
                        <div className="flex items-center bg-skin text-secondary rounded-full mb-4 px-4">
                          <span>5h 25m</span>
                          <i className="scale-icon invisible"></i>
                          <div className="flex flex-col">
                            <span>Escala en el aeropuerto</span>
                          </div>
                        </div>
                        <div className="flex items-center px-4">
                          <span>2h 35m</span>
                          <i className="scale-icon"></i>
                          <div className="flex flex-col">
                            <span>11:00 <b>VLC</b> Valencia</span>
                            <span>12:00 <b>STN</b> Londres Standsted</span>
                          </div>
                        </div>
                      </div>
                    </Transition>
                  </div>
                }
              </div>
            </div>

            <div className="flex items-center justify-end mt-4">
              <div className="flex flex-col items-end mr-4 text-primary">
                <span className="font-semibold text-2xl">150€ </span>
                <span className="font-light text-base">Total 450€</span>
              </div>
              <div>
                <button className="border border-secondary bg-secondary text-white rounded-full px-4 py-2 font-semibold transition duration-300 ease-in-out hover:bg-white hover:text-secondary">Seleccionar vuelo</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>