Profile Page - Copy this React, Tailwind Component to your project

/* General Styles */ .profile container { min height: 100vh; display: flex; justify content: center; align items: center; background color: #1b1b1b; /* Dark background */ padding: 1rem; /* Add padding for smaller devices */ } .profile card { background color: #2d2d2d; /* Darker gray for card background */ box shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 1.5rem; /* 24px */ border radius: 0.5rem; /* 8px */ width: 100%; max width: 1200px; /* Adjust as needed */ } .profile grid { display: grid; grid template columns: repeat(10, 1fr); gap: 1.5rem; /* 24px */ } /* Sidebar Styles */ .sidebar { grid column: span 3; background color: #333333; /* Dark sidebar background */ padding: 1.5rem; /* 24px */ display: flex; flex direction: column; align items: center; } .back button { align self: flex start; margin bottom: 1rem; /* 16px */ color: #3182ce; /* Blue */ cursor: pointer; text decoration: underline; } .avatar container { position: relative; margin bottom: 1rem; /* 16px */ } .avatar { width: 8rem; /* 128px */ height: 8rem; /* 128px */ border radius: 50%; /* Circular image */ } .avatar upload label { position: absolute; bottom: 0; right: 0; background color: #000000; /* Black */ color: #ffffff; /* White text */ border radius: 50%; padding: 0.5rem; /* 8px */ cursor: pointer; } .avatar upload input { display: none; /* Hide input */ } .user name { font size: 1.25rem; /* 20px */ font weight: 600; /* Bold */ color: #ffffff; /* White text for better contrast */ } .logout button { margin top: auto; /* Push to bottom */ padding: 0.5rem 1rem; /* 8px 16px */ background color: #e53e3e; /* Red */ color: white; border radius: 0.375rem; /* Rounded */ cursor: pointer; } .logout button:hover { background color: #c53030; /* Darker red on hover */ } /* Form Container Styles */ .form container { grid column: span 7; background color: #2d2d2d; /* Dark gray for form background */ padding: 1.5rem; /* 24px */ border radius: 0.5rem; /* Rounded */ } .form title { font size: 1.5rem; /* 24px */ font weight: 700; /* Bold */ margin bottom: 1.5rem; /* 24px */ color: #ffffff; /* White text */ } .form grid { display: grid; grid template columns: 1fr 1fr; /* Two columns */ gap: 1rem; /* 16px */ } .form left { grid column: span 1; /* Span left column */ } .form right { grid column: span 1; /* Span right column */ } .form group { margin bottom: 1rem; /* 16px */ } .form label { display: block; font size: 0.875rem; /* 14px */ font weight: 500; /* Medium */ color: #e2e8f0; /* Light gray for labels */ } .form input { width: 100%; padding: 0.5rem; /* 8px */ border: 1px solid #4a5568; /* Darker border for inputs */ border radius: 0.375rem; /* Rounded */ background color: #1a202c; /* Dark input background */ color: #ffffff; /* White text */ } .form input::placeholder { color: #a0aec0; /* Placeholder color */ } /* Social Input Styles */ .social input { position: relative; } .social input field { width: 100%; padding: 0.5rem; /* 8px */ border: 1px solid #4a5568; /* Darker border */ border radius: 0.375rem; /* Rounded */ background color: #1a202c; /* Dark background */ color: #ffffff; /* White text */ } .social icon { position: absolute; right: 0.5rem; /* 8px */ top: 50%; transform: translateY( 50%); } .icon { width: 1.25rem; /* 20px */ height: 1.25rem; /* 20px */ } .form submit { display: flex; justify content: flex end; margin top: 1.5rem; /* 24px */ } .submit button { padding: 0.5rem 1.5rem; /* 8px 24px */ background color: #000000; /* Black */ color: white; border radius: 0.375rem; /* Rounded */ cursor: pointer; } .submit button:hover { background color: #4a5568; /* Darker gray on hover */ } /* Responsive Styles */ @media (max width: 768px) { .profile grid { grid template columns: 1fr; /* 1 column for small screens */ } .sidebar { grid column: span 12; /* Full width */ margin bottom: 1.5rem; /* 24px */ } .form container { grid column: span 12; /* Full width */ } .form grid { grid template columns: 1fr; /* 1 column for small screens */ } }