mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-06 14:16:50 +02:00
Add Check Browsers Support
This commit is contained in:
Phuoc Nguyen
61
README.md
61
README.md
@@ -1,5 +1,3 @@
|
||||
[](https://www.producthunt.com/posts/css-layout?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-css-layout)
|
||||
|
||||
# CSS Layout
|
||||
|
||||
A collection of popular layouts and patterns made with CSS:
|
||||
@@ -89,13 +87,54 @@ Be my friend on
|
||||
|
||||
## Products
|
||||
|
||||
You might be interesting in my products:
|
||||
You might be interested in my products:
|
||||
|
||||
| Product | Description |
|
||||
|---------------------------------------------------|-------------------------------------------------------------------|
|
||||
| [Blur Page](https://blur.page) | A browser extension to hide sensitive information on a web page |
|
||||
| [CSS Layout](https://csslayout.io) | A collection of popular layouts and patterns made with CSS |
|
||||
| [Fake Numbers](https://fakenumbers.io) | Generate fake and valid numbers |
|
||||
| [Form Validation](https://formvalidation.io) | The best validation library for JavaScript |
|
||||
| [HTML DOM](https://htmldom.dev) | How to manage HTML DOM with vanilla JavaScript |
|
||||
| [React PDF Viewer](https://react-pdf-viewer.dev) | A React component to view a PDF document |
|
||||
<table>
|
||||
<tbody>
|
||||
<tr valign="top">
|
||||
<td width="25%" align="center">
|
||||
<h3>1 LOC (3.3k★)</h3>
|
||||
<a href="https://1loc.dev">Favorite JavaScript utilities in single line of code</a>
|
||||
</td>
|
||||
<td width="25%" align="center">
|
||||
<h3>Blur Page</h3>
|
||||
<a href="https://blur.page">A browser extension to hide sensitive information on a web page</a>
|
||||
</td>
|
||||
<td width="25%" align="center">
|
||||
<h3>Check Browsers Support</h3>
|
||||
<a href="https://checkbrowsers.support">A browser extension to check browser compatibility without leaving your tab</a>
|
||||
</td>
|
||||
<td width="25%" align="center">
|
||||
<h3>CSS Layout (2.7k★)</h3>
|
||||
<a href="https://csslayout.io">A collection of popular layouts and patterns made with CSS</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td width="25%" align="center">
|
||||
<h3>Fake Numbers</h3>
|
||||
<a href="https://fakenumbers.io">Generate fake and valid numbers</a>
|
||||
</td>
|
||||
<td width="25%" align="center">
|
||||
<h3>Form Validation</h3>
|
||||
<a href="https://formvalidation.io">The best validation library for JavaScript</a>
|
||||
</td>
|
||||
<td width="25%" align="center">
|
||||
<h3>HTML DOM (3.1k★)</h3>
|
||||
<a href="https://htmldom.dev">How to manage HTML DOM with vanilla JavaScript</a>
|
||||
</td>
|
||||
<td width="25%" align="center">
|
||||
<h3>React PDF Viewer</h3>
|
||||
<a href="https://react-pdf-viewer.dev">A React component to view a PDF document</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td width="25%" align="center">
|
||||
<h3>this VS that</h3>
|
||||
<a href="https://thisthat.dev">The differences between ___ and ___ in the front-end development</a>
|
||||
</td>
|
||||
<td width="25%" align="center"></td>
|
||||
<td width="25%" align="center"></td>
|
||||
<td width="25%" align="center"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -15,39 +15,57 @@ const Footer: React.FC<{}> = () => {
|
||||
<div>
|
||||
<h3 className='text-xl sm:text-2xl font-semibold mb-2'>Products</h3>
|
||||
<ul className='flex flex-wrap -ml-1 -mr-1'>
|
||||
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
|
||||
<a
|
||||
href="https://1loc.dev"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="1 LOC - favorite JavaScript utilities in single line of code"
|
||||
>
|
||||
<div className='font-semibold flex items-center'>
|
||||
1 LOC
|
||||
<span className='bg-green-600 font-normal ml-1 p-1 rounded text-sm text-white'>new</span>
|
||||
</div>
|
||||
<span className='text-gray-600'>favorite JavaScript utilities in single line of code</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
|
||||
<a
|
||||
href="https://blur.page"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="BlurPage - a browser extension to hide sensitive element on page"
|
||||
>
|
||||
<div className='font-semibold'>Blur Page</div>
|
||||
<span className='text-gray-600'>
|
||||
a browser extension to hide sensitive element on page
|
||||
</span>
|
||||
<span className='text-gray-600'>a browser extension to hide sensitive element on page</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
|
||||
<a
|
||||
href="https://checkbrowsers.support"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="Check Browsers Support - a browser extension to check browser compatibility without leaving your tab"
|
||||
>
|
||||
<div className='font-semibold'>Check Browsers Support</div>
|
||||
<span className='text-gray-600'>a browser extension to check browser compatibility without leaving your tab</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
|
||||
<a
|
||||
href="https://csslayout.io"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="CSS Layout - a collection of popular layouts and patterns made with CSS"
|
||||
>
|
||||
<div className='font-semibold'>CSS Layout</div>
|
||||
<span className='text-gray-600'>
|
||||
a collection of popular layouts and patterns made with CSS
|
||||
</span>
|
||||
<span className='text-gray-600'>a collection of popular layouts and patterns made with CSS</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
|
||||
<a
|
||||
href="https://fakenumbers.io"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="Fake Numbers - a JavaScript library to fake a number"
|
||||
>
|
||||
@@ -59,7 +77,6 @@ const Footer: React.FC<{}> = () => {
|
||||
<a
|
||||
href="https://formvalidation.io"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="FormValidation - the best validation library for JavaScript"
|
||||
>
|
||||
@@ -71,21 +88,17 @@ const Footer: React.FC<{}> = () => {
|
||||
<a
|
||||
href="https://htmldom.dev"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="HTML DOM - Common tasks of managing HTML DOM with native API"
|
||||
>
|
||||
<div className='font-semibold'>HTML DOM</div>
|
||||
<span className='text-gray-600'>
|
||||
common tasks of managing HTML DOM with vanilla JavaScript
|
||||
</span>
|
||||
<span className='text-gray-600'>common tasks of managing HTML DOM with vanilla JavaScript</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
|
||||
<a
|
||||
href="https://react-pdf-viewer.dev"
|
||||
rel="noopener noreferrer"
|
||||
style={{ textDecoration: 'none' }}
|
||||
target="_blank"
|
||||
title="React PDF Viewer - a PDF viewer made for React"
|
||||
>
|
||||
@@ -93,6 +106,17 @@ const Footer: React.FC<{}> = () => {
|
||||
<span className='text-gray-600'>a PDF viewer made for React</span>
|
||||
</a>
|
||||
</li>
|
||||
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
|
||||
<a
|
||||
href="https://thisthat.dev"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="this VS that - the differences between ___ and ___ in the front-end development"
|
||||
>
|
||||
<div className='font-semibold'>this VS that</div>
|
||||
<span className='text-gray-600'>the differences between ___ and ___ in the front-end development</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user