Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Commands
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:5173
npm run build	Build your production site at ./dist
npm run preview	Preview your build locally, before deploying

The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: Github
• Live Site URL: Github pages

My process

Built with

• Vite
• Tailwind CSS
• React JS

What I learned

we can use the tailwind group to give a hover effect to the child of a component

├── parent component /
│   └── child element /
│       └── another child element /

<section className="group {some tailwindcss}">
/* ... */
  <h1 className="group-hover:text-[color:hsl(47,_88%,_63%)] {other tailwind code}">
    HTML & CSS foundations
  </h1>
/* ... */
</section>

Styling based on parent state (group-{modifier}) to learn more.

Author

• Frontend Mentor - @haikalgakbar
• Twitter - @haikalgakbar