Testimonials Grid Section built with Astro and Tailwind CSS
Design comparison
Solution retrospective
I originally attempted to use card components and data stored in a JSON file. I soon realized that there was too much variation in the cards to benefit from a generic card design. I am proud that I was able to recognize the flaw in my design early and start over without too much effort.
What challenges did you encounter, and how did you overcome them?I tried to original store the testimonial data in a JSON file along with some custom CSS code that was specific to each testimonial. I soon discovered that the Tailwind JIT was not compiling those class names when stored in a JSON file and the styling was being lost. It took me quite a bit of time to figure out what was causing the problem...but then figured out that I needed to add the JSON file to the content
property in the tailwind.config.mjs
file. In the end, however, I ended up scraping the idea of using a JSON file for other reasons.
Nothing at this time. But I am very open to suggestions and constructive criticism.
Community feedback
- @mhjarvisPosted 3 months ago
Your site looks great - love it that you also used Astro. I ended up actually creating a Card component in mine, along with a JSON file. Finally got it working.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord