Nerd For Tech
Published in

Nerd For Tech

Image Gallery with React and Tailwind CSS

Repeat
npx create-react-app tailwindcss-gallery
Initial setup
App.js
Tailwind
App.js
App
API Keys
.env
App.js
ImageCard.js
Pixabay API
App.js
import React, { useState } from 'react';const ImageSearch = ({ searchText }) => {
const [text, setText] = useState('');
const onSubmit = (e) => {
e.preventDefault();
searchText(text);
}
return (
<div className='max-w-sm rounded overflow-hidden my-10 mx-auto'>
<form onSubmit={onSubmit} className="w-full max-w-sm">
<div className="flex items-center border-b-2 border-purple-500 py-2">
<input onChange={e => setText(e.target.value)} className="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Search Image..." />
<button className="flex-shrink-0 bg-purple-500 hover:bg-purple-700 border-purple-500 hover:border-purple-700 text-sm border-4 text-white py-1 px-2 rounded" type="submit">
Search
</button>
</div>
</form>
</div>
)
}
export default ImageSearch;
App.js
Complete App

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store