Medium Card - Copy this React, Tailwind Component to your project

<View style={styles.card}> <View style={styles.header}> {icon && <View>{icon}</View>} <Text style={styles.title}>{type}</Text> <Text style={styles.date}>{date}</Text> </View> <Text numberOfLines={1} style={{marginLeft:2, fontSize:16}} ellipsizeMode="tail">Subject: {subject}</Text> <View style={styles.chip}> <Text style={styles.boldLargeText}>To: </Text> <Text ellipsizeMode="tail" numberOfLines={1} style={styles.chipText}>{selectedRecipients} Parents</Text> </View> <Text numberOfLines={2} ellipsizeMode="tail" style={styles.message}>{message}</Text> <View style={styles.footer}> <FontAwesome name="eye" size={16} color="#666" /> <Text style={styles.viewCount}>0/7</Text> </View> <Button mode="contained" onPress={onPress} style={styles.button} labelStyle={styles.buttonText} > View Details </Button> create a card that contains information like this but this card should be a medium size not cover the most of thescreen generate 10 card lists and dont add gap between them add a line maybe so i can check