The latest articles on Forem by Taufik Hidayatulloh (@taufik-h). https://forem.com/taufik-h https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1156572%2F977e1ba4-c0ad-4bac-870b-b4355b3e86f2.png https://forem.com/taufik-h en Taufik Hidayatulloh Thu, 04 Apr 2024 09:16:33 +0000 https://forem.com/taufik-h/neubeam-new-tailwindcss-ui-library-2kf0 https://forem.com/taufik-h/neubeam-new-tailwindcss-ui-library-2kf0 <h2> NeuBeam: A Tailwind CSS Component Library with a Modern Touch </h2> <p><strong>Introducing NeuBeam!</strong> A free, open-source website component library for Tailwind CSS that draws inspiration from modern design trends like brutalism and retro. NeuBeam offers a variety of ready-to-use components that can help you build websites quickly and easily, without sacrificing aesthetics.</p> <p><strong>Key Features of NeuBeam:</strong></p> <ul> <li> <strong>Stylish and modern components:</strong> NeuBeam features a variety of UI components inspired by the latest design trends, such as brutalism and retro. These components are carefully crafted to give your website a modern and eye-catching look.</li> <li> <strong>Easy to use:</strong> NeuBeam is easy to use and integrate with Tailwind CSS. You can easily use NeuBeam components in your existing Tailwind CSS projects .</li> <li> <strong>Free and open-source:</strong> NeuBeam is an open-source library that is available for free. You can use it in personal or commercial projects without restrictions.</li> </ul> <p><strong>Technologies Used:</strong></p> <ul> <li> <strong>Tailwind CSS:</strong> NeuBeam is built on top of Tailwind CSS, a popular CSS framework for building websites quickly and easily.</li> <li> <strong>Next.js:</strong> NeuBeam uses Next.js, a React framework that allows you to build static websites and server-side rendered applications.</li> </ul> <p><strong>Demo and Repository:</strong></p> <ul> <li> <strong>Demo:</strong> <a href="https://neubeam.vercel.app/">neubeam 🌐 </a> </li> <li> <strong>GitHub Repository:</strong> <a href="https://github.com/Taufik-H/neubeam">Check or contribute 🔗</a> </li> </ul> <p><strong>About Me:</strong></p> <p>My name is Taufik-H, a Junior Frontend Web Developer from Indonesia. I am passionate about web design and development. I created NeuBeam with the aim of helping other developers build modern and attractive websites easily.</p> <p><strong>Call to Action:</strong></p> <ul> <li> <strong>Try NeuBeam:</strong> Use NeuBeam in your next Tailwind CSS project.</li> <li> <strong>Contribute:</strong> NeuBeam is an open-source project. You can contribute by providing feedback, reporting bugs, or creating pull requests (<a href="https://github.com/Taufik-H/neubeam">neubeam 🔗</a>).</li> <li> <strong>Spread the word:</strong> Help spread the word about NeuBeam to your friends and colleagues.</li> </ul> <p>⚠️ <strong>NeuBeam</strong> is still under development!</p> <h3> Expect even more awesome components coming soon, and you can be a part of it!👊 We're all about collaboration. </h3> <p><strong>✋Disclaimer</strong>: Being a Junior Web Dev, my code might not be the tidiest yet. But that's where you come in! <strong>NeuBeam</strong> can be even better with your help. Let's improve the code together and follow best practices while we're at it. Imagine the awesome and well-structured website we can build together!</p> <p><strong>Thank you for reading!😁</strong></p> <p>Taufik-H 👋<br> Junior Frontend Web Developer<br> Indonesia 🇮🇩<br> <a href="https://github.com/Taufik-H">My Github account</a></p> <h4> A bit preview : </h4> <ul> <li>form : </li> </ul> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbwf1ok0ptv84vz9wt7f.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkbwf1ok0ptv84vz9wt7f.png" alt="Preview form component" width="800" height="356"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk7y6pzq8danudmueuz8o.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk7y6pzq8danudmueuz8o.png" alt="Preview the code component" width="800" height="356"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj73qaloaiccnwir2rmeb.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj73qaloaiccnwir2rmeb.png" alt="How about the responsivity" width="800" height="356"></a></p> webdev tailwindcss components opensource