<div className=“” style={{ backgroundImage: url(${bg}) }}>
<div className=“”>
{weather && (
<div className=“”>
<div className=“”>
<input
onKeyDown={enterKeyPressed}
type=“text”
name=“city”
placeholder=“Enter City…”
/>
<button onClick={(e) => handleUnitsClick(e)}>°F</button>
</div>

<div className=“”>
<div className=“”>
<h3>{${weather.name}, ${weather.country}}</h3>
<img src={weather.iconURL} alt=“weatherIcon” />
<h3>{weather.description}</h3>
</div>
<div className=“”>
<h1>{${weather.temp.toFixed()} °${<br/> units === "metric" ? "C" : "F"<br/> }}</h1>
</div>
</div>

{/* bottom description */}
<Descriptions weather={weather} units={units} />
</div>
)}
</div>
</div>


how to make above code beautiful using tailwind css and make it funky look and adding complex animation
give example code
Sure! Here’s an example of how you can use Tailwind CSS to style the weather component and add animations to make it look funky:

import React, {useState} from “react”;
import { FaArrowUp, FaArrowDown, FaWind } from “react-icons/fa”;
import { BiHappy } from “react-icons/bi”;
import { MdCompress, MdOutlineWaterDrop } from “react-icons/md”;
import bg from ‘./bg.jpg’;
import Descriptions from ‘./Descriptions’;

const Weather = ({ weather }) => {
  const [units, setUnits] = useState(‘metric’);
  const tempUnit = units === “metric” ? “°C” : “°F”;
  const windUnit = units === “metric” ? “m/s” : “m/h”;

  const handleUnitsClick = () => {
      setUnits(units === “metric” ? “imperial” : “metric”);
  }

  const enterKeyPressed = event => {
    if (event.key === “Enter”) {
      // do something
    }
  }

  return (
    <div className=“min-h-screen flex items-center justify-center bg-cover bg-center” style={{ backgroundImage: url(${bg}) }}>
      <div className=“max-w-md w-full p-6 rounded-lg bg-white shadow-lg md:p-8”>
        {weather && (
          <div className=“space-y-4”>
            <div className=“flex justify-between items-center”>
              <input
                onKeyDown={enterKeyPressed}
                type=“text”
                name=“city”
                placeholder=“Enter City…”
                className=“border border-gray-300 px-2 py-1 rounded-lg w-2/3 md:w-3/4 focus:outline-none focus:border-blue-400”
              />
              <button onClick={handleUnitsClick} className=“px-2 py-1 border border-blue-400 rounded-lg focus:outline-none hover:bg-blue-100 transition-colors duration-300”>{units === “metric” ? “°F” : “°C”}</button>
            </div>

            <div className=“flex flex-col items-center justify-center space-y-6”>
              <div className=“flex items-center space-x-4”>
                <h3 className=“font-medium text-gray-700 text-lg”>{${weather.name}, ${weather.country}}</h3>
                <img src={weather.iconURL} alt=“weatherIcon” className=“w-12 h-12”/>
                <h3 className=“font-medium text-gray-700 text-lg”>{weather.description}</h3>
              </div>
              <div className=“flex items-center space-x-2”>
                <h1 className=“font-bold text-4xl text-gray-700”>{${weather.temp.toFixed()} ${tempUnit}}</h1>
                <div className=“py-1 px-2 bg-blue-400 text-white rounded-full text-sm uppercase”>{weather.condition}</div>
              </div>
              <div className=“flex items-center space-x-4”>
                <div className=“flex flex-col items-center space-y-1”>
                  <FaArrowDown className=“text-red-600 text-xl animate-ping” />
                  <small className=“text-gray-500 font-medium”>Min Temp</small>
                  <span className=“font-bold”>{${weather.temp_min.toFixed()} ${tempUnit}}</span>
                </div>

                <div className=“flex flex-col items-center space-y-1”>
                  <FaArrowUp className=“text-green-600 text-xl animate-pulse” />
                  <small className=“text-gray-500 font-medium”>Max Temp</small>
                  <span className=“font-bold”>{${weather.temp_max.toFixed()} ${tempUnit}}</span>
                </div>

                <div className=“flex flex-col items-center space-y-1”>
                  <BiHappy className=“text-yellow-500 text-xl animate-bounce” />
                  <small className=“text-gray-500 font-medium”>Feels Like</small>
                  <span className=“font-bold”>{${weather.feels_like.toFixed()} ${tempUnit}}</span>
                </div>

                <div className=“flex flex-col items-center space-y-1”>
                  <MdCompress className=“text-blue-500 text-xl animate-wiggle” />
                  <small className=“text-gray-500 font-medium”>Pressure</small>
                  <span className=“font-bold”>{${weather.pressure} hPa}</span>
                </div>

                <div className=“flex flex-col items-center space-y-1”>
                  <MdOutlineWaterDrop className=“text-blue-400 text-xl animate-pulse-fast” />
                  <small className=“text-gray-500 font-medium”>Humidity</small>
                  <span className=“font-bold”>{${weather.humidity} %}</span>
                </div

continue generating above code