Import react, {... - Tailwind AI

LTP
<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center">
  <div class="bg-white shadow-lg rounded-lg p-8 max-w-md w-full relative">
    <button class="absolute top-4 left-4 text-gray-500 hover:text-gray-700 transition-all" onclick="window.history.back()">
      <i class="fa-solid fa-arrow-left"></i>
    </button>
    <h1 class="text-2xl font-bold mb-6 text-center">Profile</h1>
    <div class="mb-4">
      <label for="username" class="block text-gray-700 mb-2">Username</label>
      <input type="text" id="username" class="w-full p-2 border rounded" placeholder="Enter your username" value="JohnDoe" readonly>
    </div>
    <div class="mb-4">
      <label for="email" class="block text-gray-700 mb-2">Email</label>
      <input type="email" id="email" class="w-full p-2 border rounded" placeholder="Enter your email" value="johndoe@example.com" readonly>
    </div>
    <div class="mb-4">
      <label for="bio" class="block text-gray-700 mb-2">Bio</label>
      <textarea id="bio" class="w-full p-2 border rounded" placeholder="Tell us about yourself" rows="4" readonly>Web Developer based in San Francisco.</textarea>
    </div>
    <div class="flex items-center justify-between mb-4">
      <span class="text-gray-700">Following</span>
      <button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-400 transition-all" onclick="handleFollow()">Follow</button>
    </div>
    <div class="mb-6">
      <button class="w-full bg-gray-200 text-gray-700 p-2 rounded hover:bg-gray-300 transition-all" onclick="handleShowMore()">Show More</button>
    </div>
    <div id="more-info" class="hidden">
      <h2 class="text-xl font-semibold mb-4">Additional Information</h2>
      <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="mt-6">
      <h2 class="text-xl font-semibold mb-4">Change Password</h2>
      <form>
        <div class="mb-4">
          <label for="current-password" class="block text-gray-700 mb-2">Current Password</label>
          <input type="password" id="current-password" class="w-full p-2 border rounded" placeholder="Enter your current password">
        </div>
        <div class="mb-4">
          <label for="new-password" class="block text-gray-700 mb-2">New Password</label>
          <input type="password" id="new-password" class="w-full p-2 border rounded" placeholder="Enter your new password">
        </div>
        <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-400 transition-all">Change Password</button>
      </form>
    </div>
  </div>
  <script>
    function handleFollow() {
      const button = document.querySelector('button[onclick="handleFollow()"]');
      button.textContent = button.textContent === 'Follow' ? 'Unfollow' : 'Follow';
    }

    function handleShowMore() {
      const moreInfo = document.getElementById('more-info');
      moreInfo.classList.toggle('hidden');
    }
  </script>
</body>
Import react, { usestate } from "react"; import { useauth } from "../../hooks/useauth"; import passwordchangeform from "../../components/profile/passw...
