Styled Card - Copy this React, Tailwind Component to your project
Design a modern, sleek, and intuitive web page for research article discovery. The page should have a minimalist, professional design with clean lines and smooth animations. The overall layout should have a modern aesthetic with a focus on user experience. Key Features: Input Selection (Tags or Text): The user should be able to choose between two input options: A list of tags (display as selectable chips or multi select dropdown). A text input field (for manual text entry). The toggle between tags and text should be clearly visible, with a smooth switch animation. Labels for each input method should be concise, such as "Search by Tags" or "Search by Text." For the tags input, provide a suggestion dropdown as the user types to ease tag selection. Submit Button: A single, large, eye catching button (e.g., "Search Articles") should be placed below the input fields. The button should have a subtle hover effect (e.g., color shift or shadow) to make it feel interactive. After clicking the button, a loading animation (such as a spinner or progress bar) should appear while the backend fetches the data. Card List Display: Once the backend finishes fetching data, a list of modern, stylish cards should populate the page. Each card should represent a research article, with the following details displayed: Title of the Research Article: Display in bold, prominent font at the top of the card. Authors: Listed just below the title in a smaller, lighter font. Publication Date: Displayed below the authors, styled in a subtle, unobtrusive way. Journal Name or Source: Placed near the bottom of the card. Tags or Categories: Show the tags used in the search or related tags for the article, presented as small, clickable chips within the card. Short Summary/Abstract: Show the first 2 3 lines of the abstract, with an option to "Read More." Optional: PDF or Full Text Link Button: Include a button or icon linking to the full text article or PDF. The cards should have hover effects, such as slight elevation (drop shadow) or color highlights, to give them a tactile feel. Each card should be of uniform size for visual consistency, arranged in a responsive grid (e.g., 3 4 cards per row on desktop, 1 2 on mobile). General Layout and Styling: Use ample white space for a clean look. The design should be fully responsive for desktop, tablet, and mobile. Colors should be modern and neutral (e.g., shades of grey, white, and accent colors like soft blues or greens). Font selection should be professional yet readable, with a clear distinction between headings and body text. Additional Features: Include an option to "Clear Search" to reset the form and clear the card list. Provide a subtle notification or feedback message (e.g., "No articles found" if the search returns no results). Optionally, include a floating or sticky search bar at the top so users can easily modify their search without scrolling back up. Also, Add a set of modern, intuitive filters above the search results on the page. The filters should allow users to refine the list of research articles based on the following criteria: Date Range: Add a date picker or a range slider that allows users to select a start and end date to filter articles by publication date. Author: Include a dropdown or search input for users to filter articles by specific authors. Provide suggestions as the user types. Journal/Source: Add a multi select dropdown or checkbox list for filtering articles by specific journals or sources. Tags/Categories: Provide a section of selectable chips or checkboxes that allow users to further filter articles by related tags or categories. Filter Button: Include an "Apply Filters" button to refine the search results based on the selected filters. Clear Filters Option: Add a "Clear Filters" button or link that resets all filters and shows the full list of articles.
