React Native + Tailwind CSS Card

A selection of React Native Card components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Basic Card

import React from "react";
import { View, Text, Image } from "react-native";
import tailwind from "twrnc";

export const WithImage = () => {
  return (
    <View style={tailwind`bg-white rounded-xl w-full max-w-xs`}>
      <Image
        source={{ uri: "https://source.unsplash.com/random" }}
        style={tailwind`w-full h-64 rounded-t-xl`}
        resizeMode="cover"
      />
      <View style={tailwind`p-6`}>
        <Text style={tailwind`text-slate-900 text-lg font-bold`}>
          With Image
        </Text>
      </View>
    </View>
  );
};

Card with Drop Shadow

import React from "react";
import { View, Text, Image } from "react-native";
import tailwind from "twrnc";

export const WithImageShadow = () => {
  return (
    <View
      style={[
        tailwind`bg-white rounded-xl w-full max-w-xs`,
        {
          shadowColor: "#000",
          shadowOffset: {
            width: 0,
            height: 2,
          },
          shadowOpacity: 0.25,
          shadowRadius: 3.84,
          elevation: 5,
        },
      ]}
    >
      <Image
        source={{ uri: "https://source.unsplash.com/random" }}
        style={tailwind`w-full h-64 rounded-t-xl`}
        resizeMode="cover"
      />
      <View style={tailwind`p-6`}>
        <Text style={tailwind`text-slate-900 text-lg font-bold`}>
          With Image
        </Text>
      </View>
    </View>
  );
};