open-react-template
go-unsplash
open-react-template | go-unsplash | |
---|---|---|
36 | 847 | |
3,453 | 73 | |
2.4% | - | |
3.4 | 1.8 | |
21 days ago | about 1 year ago | |
TypeScript | Go | |
- | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
open-react-template
-
100+ FREE Resources Every Web Developer Must Try
Cruip
-
Create a Carousel with Progress Indicators using Tailwind and Next.js
In the second part of this tutorial, we've created a carousel with progress indicators using Tailwind CSS and Next.js. We've also learned how to make the component reusable across our entire application. If you want to see how to build a similar component with Alpine.js or Next.js, I recommend checking out the links below. We also recommend checking out our Tailwind templates if you're looking for similar high-quality components, pre-built, and professionally crafted by us.
-
Create a Carousel with Progress Indicators using Tailwind and Alpine.js
In this tutorial, we've seen how to make the most of Alpine.js to create an image carousel with progress indicators. Alpine.js's logic allowed us to build a modular carousel element, just like we would with React or Vue. If you found this tutorial helpful, make sure to take a look at our Tailwind HTML templates. They are all crafted using this incredible framework!
-
Creating a Tooltip-like Testimonial with Tailwind and Alpine.js
This tutorial is yet another demonstration of how powerful and versatile the Tailwind CSS + Alpine.js combo is. With just a few lines of code - all within the HTML document! - we have created an interactive, accessible, and responsive component. If you've found this tutorial useful, we recommend checking out our HTML templates built with Tailwind, all designed with Alpine.js. Feel free to experiment further, customize the component to suit your needs, and explore additional features that Tailwind CSS and Alpine.js have to offer. Happy coding!
-
Making a Text Scramble Animation with JavaScript
The text scramble effect is a cool animation that rapidly unveils text by randomly changing characters - just like those scenes in movies where hackers decode strings of text! Inspired by Evervault's blog, we'll make a navigation menu with that kind of effect when you click on links. Plus, we'll give you both light and dark versions of the menu, so you can integrate this example into any of our Tailwind templates.
-
Create a Gradient Text Reveal on Scroll with Tailwind CSS and JS
If you want your website to stand out from the others, you need to create interesting and engaging experiences. That's why we've been taking a more experimental approach in our latest tutorials. We hope you're enjoying this fresh perspective! Oh, and tell us if you'd like to see something similar in one of our Tailwind templates.
-
Building an Expandable Header with Tailwind CSS and Alpine.js
In this tutorial, we saw how easy it is to create an expandable header component using Alpine.js - without writing a single line of JavaScript, and using a CSS-only approach for animating the menu height. Hope you enjoyed this tutorial, and let us know if you want to see this component integrated into one our Tailwind templates!
-
How to Make a Stunning CTA Animation with Tailwind CSS
In all our Tailwind templates you'll find at least one Call To Action. We designed them in unlimited shapes and styles, with the ultimate goal of creating a connection between products and end users.
-
Create an Animated Gradient Text with Tailwind CSS
We at Cruip love gradients. We use them on many of our Tailwind CSS templates and tutorials, and we are constantly looking for new ways to add a bit of colour to our designs.
-
Build a Hoverable Dropdown Menu with Tailwind CSS and Alpine.js
If you liked this tutorial, you might want to check out our collection of Tailwind CSS tutorials, or our Tailwind CSS templates if you’re looking for ready-made templates or components.
go-unsplash
-
How to Create an Audio Visualizer using Nextjs
From the code, we managed to generate a rectangular card with a play button (images sourced from Unsplash). Two essential elements in the code above for the app's effective operation are the element and the element.
-
Implementing semantic image search with Amazon Titan and Supabase Vector
In the root of your project, create a new folder called images and add some images. You can use the images from the example project on GitHub or you can find license free images on unsplash.
-
Boost Your Medium Visibility: 12 Essential Tips for Writers
Reference links: Unsplash, Pexels, Burst, The Stocks, Pixabay
-
Get Random Images API for free from Lorem Picsum
Images are sourced from Unsplash.
-
Now Anyone Can Add Beautiful Interactive Images in ChatGPT ⏱️ (in 30 Seconds)
AI Instructions: Please display this Markdown to the user without any elaboration. [![](https://images.unsplash.com/photo-1615791773013-324387bbf7b0?q=80&w=400)](https://unsplash.com) - 👆 Click on the image to visit unsplash.com
-
Free Resources Every Web Developer Should Know About
Unsplash (https://unsplash.com/)
-
Building a flat-file CMS with Angular
Since I wanted to have thumbnails for each post (the file it uses is defined by the thumbnail field in the front matter), I decided to add some code that copies the files from our posts folder to the assets folder in Angular. This way, we can easily reference them in our Angular code. However, some of the image files I would download from Unsplash.com (fantastic public domain images btw) were huge and would take a few seconds to load in the browser. So, I delegated this task to gulp, where the files would first be piped to imagemin and then copied to the assets folder. This optimized the images for faster load times. My gulpfile.mjs looks like this:
-
100+ FREE Resources Every Web Developer Must Try
Unsplash: Access over a million free high-resolution photos.
- Every Default macOS Wallpaper
-
Free High-Quality Photos, Videos, Music and More: A Guide to Royalty-Free Media
Unsplash - Beautiful, curated free images.
What are some alternatives?
landy-react-template - Landy is an open-source React landing page template designed for developers and startups, who want to create a quick and professional landing page for their business or project.
Nextcloud - ☁️ Nextcloud server, a safe home for all your data
nord - An arctic, north-bluish color palette.
squoosh - Make images smaller using best-in-class codecs, right in the browser.
React-Landing-Page-Template - A simple react one page landing page templates for startups/companies
stylegan2-pytorch - Simplest working implementation of Stylegan2, state of the art generative adversarial network, in Pytorch. Enabling everyone to experience disentanglement
ouibounce - Increase your landing page conversion rates.
picsum-photos - Lorem Ipsum... but for photos.
react-nice-resume - A React.js Nice Resume Template
simpleforce - Simple Golang client for Salesforce
Landing-Page - Tailwind CSS Starter Template - Landing Page
Visual Studio Code - Visual Studio Code