Tailwind CSS home page

Showcase

Opal

Screenshot of the Opal home page. The header contains the Opal logo, brief product information, and a 'Reserve' button. The hero section has a title in large lettering and the background image shows the Opal C1 webcam on a black backdrop.
Technologies
Tailwind CSS, Next.js, React
Date
URL
opalcamera.com
Go to website

Opal

The first DSLR quality professional webcam.

The Opal camera is built to make it easy to look and sound professional at work in a remote world. This is achieved with a combination of hardware and machine learning. The Opal website is built using Tailwind CSS.

Screenshot of the Opal website. The header contains the Opal logo, brief product information, and a 'Reserve' button. On the left side of the screen is a list of the Opal camera's features with titles and short descriptions. On the right is a screenshot of the Opal application, showing how 'focus' and 'brightness' can be adjusted with a slider interface.
Screenshot of the Opal Camera software with three features highlighted. Clicking each feature will change the screenshot.
Mobile screenshot of the Opal website. The header contains the Opal logo. The hero section has a title in large lettering and the background image shows the Opal C1 webcam on a black backdrop. At the bottom of the screen there is a 'Reserve' button.
Mobile screenshot of the Opal website. The header contains the Opal logo. Underneath is a paragraph explaining what is included with the Opal camera, and a photograph of a person holding the camera in the palm of their hand. At the bottom of the screen there is a 'Reserve' button.
Mobile screenshot of the Opal website. The header contains the Opal logo. Underneath is a 3D outline of the Opal camera and details of the camera's dimensions and weight. There are additional collapsed sections underneath with titles such as 'Box Contents' and 'Cable'. At the bottom of the screen there is a 'Reserve' button.
The Opal Camera website experience on mobile devices.
Screenshot of the 'Image quality' section of the Opal website. The header contains the Opal logo, brief product information, and a 'Reserve' button. The section contains three images in a row. Each one is a frame taken with a different camera, and the images are of varying quality. The section shows that the Opal C1 is better quality than the MacBook Webcam, and comparable to a camera eight times more expensive.
Two images captured with different cameras are compared to one by the Opal Camera.
Screenshot of the 'Technical Specifications' section of the Opal website. The header contains the Opal logo, brief product information, and a 'Reserve' button. Underneath is the page title in large lettering, followed by a 3D outline of the Opal camera and its dimensions and weight specifications.
Section highlighting the technical specifications of the Opal Camera. The top menu is sticky as you scroll through the site, and a cool easter egg is hidden on the Reserve button as it scrolls over images.