Input Field Generator

.input-wrapper {
  position: relative;
  display: inline-block;
  width: 300px;
}

.input-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.input-field {
  width: 100%;
  height: 44px;
  padding: 12px 16px;
  
  font-size: 16px;
  font-family: inherit;
  background-color: #ffffff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  
  transition: all 0.2s ease;
  outline: none;
  
}

.input-field::placeholder {
  color: #9ca3af;
}

.input-field:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.input-field:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

<div class="input-wrapper">
  <label class="input-label" for="input-field">Email Address</label>
  <input class="input-field" id="input-field" type="text" placeholder="Enter your email..." />
</div>

<!-- Tailwind CSS Input -->
<div class="relative">
  <label class="block mb-1.5 text-sm font-medium text-gray-700">Email Address</label>
  <input
    type="text"
    class="w-full px-4 py-3 text-base rounded-lg border focus:outline-none focus:ring-2 transition-all border-gray-300 focus:border-blue-500 focus:ring-blue-200"
    placeholder="Enter your email..."
    
  />

</div>

import React, { useState } from 'react';

const Input = ({
  type = 'text',
  placeholder = 'Enter your email...',
  label = 'Email Address',
  showLabel = true,
  required = false,
  disabled = false,
  value,
  onChange,
  error,
  ...props
}) => {
  const [focused, setFocused] = useState(false);

  const wrapperStyles = {
    position: 'relative',
    display: 'inline-block',
    width: '300px',
  };

  const labelStyles = {
    display: 'block',
    marginBottom: '6px',
    fontSize: '14px',
    fontWeight: '500',
    color: '#374151',
  };

  const inputStyles = {
    width: '100%',
    height: '44px',
    padding: '12px 16px',
    
    fontSize: '16px',
    fontFamily: 'inherit',
    backgroundColor: '#ffffff',
    color: '#1f2937',
    border: '1px solid ' + (focused ? '#3b82f6' : '#d1d5db'),
    borderRadius: '8px',
    boxShadow: focused ? '0 0 0 3px rgba(59, 130, 246, 0.2)' : 'none',
    transition: 'all 0.2s ease',
    outline: 'none',
    opacity: disabled ? 0.6 : 1,
    cursor: disabled ? 'not-allowed' : 'text',
  };

  const iconStyles = {
    position: 'absolute',
    top: showLabel ? 'calc(50% + 10px)' : '50%',
    transform: 'translateY(-50%)',
    left: '12px',
    color: '#6b7280',
    pointerEvents: 'none',
    fontSize: '16px',
  };

  const InputComponent = type === 'textarea' ? 'textarea' : 'input';

  return (
    <div style={wrapperStyles}>
      {showLabel && (
        <label style={labelStyles}>
          {label}{required && ' *'}
        </label>
      )}
      
      <InputComponent
        type={type !== 'textarea' ? type : undefined}
        style={inputStyles}
        placeholder={placeholder}
        required={required}
        disabled={disabled}
        value={value}
        onChange={onChange}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        {...props}
      />
    </div>
  );
};

export default Input;