VP
Vitalii Psurtsev

App Layout - Copy this React, Tailwind Component to your project

**Update the "Intima" Tab** 1. **Add Sub tabs:** Two sub tabs: **"Matching"** (left) and **"Messages"** (right). Located under the header and account icon. 2. **Matching Sub tab:** Display **cards** of potential matches: **Blurred photo**, **name** (e.g., "B***"), **gender/identity**, **match probability** (e.g., "87%"), **match type** (e.g., "Friend"). **Sort** cards by match probability (highest first). **Tap to view profile**: Opens detailed profile view (like "Second Profile" tab), with a return option. 3. **Messages Sub tab:** Display **chats** with matches: **Blurred photo**, **name** (e.g., "B***"), **last message preview**, **timestamp**. **Tap to chat**: Opens conversation to continue messaging. 4. **General Notes:** Use placeholder data for demo purposes. Keep names as "First letter + asterisks." Use blurred photos for anonymity. Ensure smooth navigation between views. Design to align with app’s style. Let me know if anything needs clarification.

Prompt
Component Preview

About

AppLayout - A responsive layout featuring tabs for "Matching" and "Messages," with an account icon, professionally built with React and Tailwind. View and copy code!

Share

Last updated 1 month ago